fix(ui): render the sidebar scrollbar with shadcn ScrollArea

[yuneng-berri]

Relevant issues

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

This is a UI-only change, so the proof is visual and measured rather than a curl.

Repro: open the Admin UI and shrink the window until the left navigation overflows.

Before: the browser's native scrollbar renders on the sidebar. After (this branch): the sidebar scrolls through the shadcn ScrollArea. Measured on the running dev server, the sidebar scrollbar goes from 2px wide with a 0px (invisible) thumb to 10px wide with a 7px rounded thumb that sits in the right gutter

Type

🐛 Bug Fix

Changes

The sidebar navigation scrolled through a native overflow-y-auto container, so the browser drew its default scrollbar. It now scrolls through the shadcn ScrollArea primitive, with the group padding moved onto the inner content so the thumb sits in the right gutter

Making the scrollbar visible surfaced the real cause. Since #32124 switched the shadcn primitives from Radix to Base UI, the base-vega scroll-area, tabs, separator and other primitives style themselves with custom variants such as data-vertical, data-horizontal, data-open and data-checked that are meant to resolve to Base UI's data-orientation and data-state attributes. Upstream shadcn ships the components but leaves those variant definitions out of what the CLI installs, so the classes matched nothing and the scrollbar collapsed to zero width. This is a known upstream gap with no merged fix yet (shadcn-ui/ui#9196)

shadcn's model is that we own the components, so the fix keeps the variants in our own stylesheet rather than taking a runtime dependency on the shadcn package. globals.css now defines the nine data-* custom variants and the no-scrollbar utility that the Base UI primitives reference, which also repairs the combobox no-scrollbar and the vertical tabs and separator styling that were silently broken the same way

No conflict with tremor

The variants are global and the dashboard scans tremor through @source, so it was worth confirming they do not collide with tremor's classes. They do not. Tremor styles with the arbitrary bracket variants data-[selected]: and data-[focus]:, which compile to the literal [data-selected] and [data-focus] selectors. The variants added here are the bare names data-selected:, data-active:, and the rest, and in Tailwind v4 an arbitrary data-[selected]: never consults a custom variant named data-selected, so the two live in separate namespaces. The tremor-heavy Usage page renders correctly after the change and its tab selected-state still toggles, which confirms the analysis in the running app

No new unit test is added because the fix is Tailwind custom-variant wiring plus a component composition swap, neither of which a jsdom test observes; the existing leftnav tests still pass and the behavior is verified on a live dev server as above

Before:

After:

[greptile-apps]

Greptile Summary

This PR fixes the native browser scrollbar showing in the left navigation by swapping SidebarContent (which used overflow-y-auto) for the shadcn ScrollArea primitive, and adds the nine Tailwind v4 @custom-variant definitions that Base UI primitives expect but that the shadcn CLI omits (shadcn-ui/ui#9196). It also defines the no-scrollbar utility needed by the combobox component.

• globals.css — adds data-open, data-closed, data-checked, data-unchecked, data-selected, data-disabled, data-active, data-horizontal, data-vertical custom variants plus a no-scrollbar utility; repairs silently-broken styling across scroll-area, tabs, separator, and combobox without touching component files.
• leftnav.tsx — wraps the sidebar nav groups in <ScrollArea className="min-h-0 flex-1"> (preserving flex-1 / min-h-0 for the flex column layout) and moves the original px-3 pb-3 gap-0.5 padding onto the inner <nav>, keeping the scrollbar thumb in the right gutter.

Confidence Score: 5/5

UI-only change to CSS custom variants and a component composition swap; no logic, API, or data paths are touched.

Both changed files are limited to the UI layer. The flex layout math is sound, semantic markup is preserved via the inner nav, and the variant definitions correctly fill the upstream shadcn gap.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/globals.css	Adds nine Tailwind v4 custom variants and a no-scrollbar utility to bridge Base UI primitive data-* attributes — correctly fills the upstream shadcn gap (shadcn-ui/ui#9196); data-selected selector is slightly narrower than sibling variants
ui/litellm-dashboard/src/components/leftnav.tsx	Replaces SidebarContent (native overflow-y-auto) with shadcn ScrollArea + a plain nav, preserving semantic markup and flex layout while surfacing the styled scrollbar thumb

_{Reviews (2): Last reviewed commit: "refactor(ui): inline the Base UI data-* ..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_/scrollbar-shadcn-scroll-area-78ca15 (e04caa8) with litellm_internal_staging (39e0efa)}

[yuneng-berri]

@greptile

[ryan-crabbe-berri]

lgtm...again