Ensure Radix UI Popover width matches trigger

I spent the day building a custom combobox using cmdk and @radix-ui/react-popover, but at the end of the day the popover size wasn't following the trigger width.

So by playing around I discovered that the popover injects the --radix-ui-popover-trigger-width css variable ito the popover content.

To fix this I just had to add the following css to my popover content:

standard CSS

.combobox-popover {
  width: var(--radix-popover-trigger-width);
}

with tailwind

import * as Popover from '@radix-ui/react-popover';
 
// later in your code 
 
<Popover.Root>
  <Popover.Trigger>
    <Button />
  </Popover.Trigger>
  <Popover.Content className="combobox-popover w-[var(--radix-popover-trigger-width)]">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </Popover.Content>
</Popover.Root>

Just that! Super simple and easy to fix.