← Tools
CSS onlyZero JS runtime3 lines

Make popovers fit better.

A tiny CSS utility for shadcn/Radix popovers that matches the trigger width and keeps long menus inside the viewport.

View on GitHub ↗

Try it yourself

Open both Status menus. The left shrinks to the text; the right matches the trigger and scrolls when space is tight.

Show width guides

Overlay live pixel measurements for the trigger and each popover.

Without popover-fit

Default PopoverContent width.

Width mismatch

Content width follows the menu, not the trigger.

With popover-fit

className="popover-fit"

Fits trigger

Matches the trigger. Scrolls when needed.

Breakdown

Three lines of CSS that read Radix’s own custom properties — no config, no runtime.

01

Start with a filter-style popover

A trigger and PopoverContent for a status filter, combobox, or long menu. By default, content width follows the menu text.

<PopoverContent>
  {/* filter / combobox / menu */}
</PopoverContent>

02

Width mismatches the trigger

Without a fixed width, the panel shrinks to the longest label. Filter UIs look uneven next to a wider trigger.

03

Add popover-fit

popover-fit sets width from --radix-popover-trigger-width and caps height with --radix-popover-content-available-height, enabling scroll when needed.

<PopoverContent className="popover-fit">

Code

The entire utility is three declarations. It only works where Radix exposes those CSS variables on the content element.

.popover-fit {
  width: var(--radix-popover-trigger-width);
  max-height: var(--radix-popover-content-available-height);
  overflow-y: auto;
}

Usage

popover-fit is CSS-only — it adds styles, not React components. Import the file, then add the class to any Radix/shadcn PopoverContent.

Copy registry/popover-fit/popover-fit.css from GitHub into your project, or install via the registry when available.

Import the CSS once:

import "@/styles/popover-fit.css";

Then add the class:

<PopoverContent className="popover-fit">
  {/* your filter, combobox, or menu content */}
</PopoverContent>

npm package coming soon.

Limitations

  • ·Designed for Radix/shadcn PopoverContent — it reads Radix’s CSS custom properties.
  • ·Best when those variables are available — Popover, DropdownMenu, Select, and combobox-style primitives expose them.
  • ·Not a replacement for accessible popover behavior — focus, keyboard, and ARIA still come from Radix.