My website uses the [shadcn Dropdown Menu](https://ui.shadcn.com/docs/components/dropdown-menu) (based on Radix's `DropdownMenuPrimitive`) to allow users to change the current website theme.

By default, the content of a dropdown component isn't the same width as its trigger. That bugged me, and so I spent a while looking for a solution. Finally, I found the answer [in Radix's docs](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#constrain-the-contentsub-content-size)!

Put the below code in your CSS file (you can remove the `@layer utilities` wrapper if not using Tailwind):

```css
@layer utilities {
  .dropdown-content-width-full {
    width: var(--radix-dropdown-menu-trigger-width);
    max-height: var(--radix-dropdown-menu-content-available-height);
  }
}
```

Now, change your `<DropdownMenuComponent>` to look like this:

```jsx
<DropdownMenuContent align="end" className="dropdown-content-width-full">
```

Voila! The content and trigger are the same width. You're welcome.