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.