Making a Radix Dropdown the Same Width as Its Trigger

My website uses the shadcn 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!

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

@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:

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

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