How to get Input <- Popover <- Icon to have same height as Combobox?

[sebm]

I have a row of elements: some Comboboxes, some Inputs. The inputs have Popovers in their "insertAfter" fields. These Popovers' PopoverButtons have Icons in them. The Icons cause the Inputs to not be the same height as the Comboboxes.

A simplified example is thus: https://codesandbox.io/s/paste-starter-kit-forked-xnemm?file=/src/index.tsx

    <Theme.Provider theme="default">
      <Box
        backgroundColor="colorBackgroundBody"
        paddingTop="space30"
        paddingLeft="space60"
      >
        <Stack orientation="horizontal" spacing="space80">
          <Combobox placeholder="Hey" items={["foo", "bar"]} />
          <Input
            name="foo"
            insertAfter={
              <PopoverContainer baseId="popover-example">
                <PopoverButton variant="link">
                  <PlusIcon decorative={false} title="fooo" />
                </PopoverButton>
                <Popover aria-label="Popover">Popover content</Popover>
              </PopoverContainer>
            }
          />
        </Stack>
      </Box>
    </Theme.Provider>

The result of this code is:

which I think looks pretty silly. Any ideas how to rectify this? I've been experimenting with a variety of things (different padding settings, sizes, etc) to no avail.

[serifluous]

Hey @sebm, thanks for bringing this up! You've definitely caught a bug. We've got a ticket in our next sprint to address it, if you'd like to follow along: https://issues.corp.twilio.com/browse/DSYS-3077

We'll reply back here when it's ready.

[nkrantz]

Another update: here's the open PR #2011

[nkrantz]

PR is merged in! Please let us know if you experience any other issues.

[sebm]

Looks great. Thanks @nkrantz 👍