Skip to content

fix(ui): de-duplicate the reset budget option and polish shadcn surfaces - #37010

Merged
yuneng-berri merged 2 commits into
litellm_internal_stagingfrom
litellm_shadcn_next_0814
Aug 16, 2026
Merged

fix(ui): de-duplicate the reset budget option and polish shadcn surfaces#37010
yuneng-berri merged 2 commits into
litellm_internal_stagingfrom
litellm_shadcn_next_0814

Conversation

@yuneng-berri

Copy link
Copy Markdown
Contributor

TLDR

Problem this solves:

  • Create Key shows "Never resets" twice, meaning different things
  • Tab strips keep a stale divider and a raw scrollbar
  • Comboboxes inherit stray borders from the forms plugin
  • Usage team filter eats a whole row; empty state is off-centre

How it solves it:

  • Label the omit option "Not set", keep "Never resets" explicit
  • Vendor shadcn's scroll-fade, drop the leftover divider classes
  • Neutralise the forms plugin once in globals.css
  • Give the export header a filterSlot; centre the empty row

User Flow

Before: an admin creating a key cannot tell which "Never resets" to pick, and one of them silently inherits a reset schedule

  1. They open http://localhost:4000/ui/?page=api-keys and click Create New Key
  2. They expand Optional Settings and open the Reset Budget dropdown
  3. Two entries read "Never resets". The first is preselected
  4. They leave it alone, or pick the first one, and create the key
  5. If the proxy sets a default reset window, the new key silently picks it up, so its budget resets on a schedule the admin thought they had turned off

After: the two entries are labelled for what they do, so the choice matches the outcome

  1. They open http://localhost:4000/ui/?page=api-keys and click Create New Key
  2. They expand Optional Settings and open the Reset Budget dropdown
  3. The preselected entry reads "Not set", and a single entry reads "Never resets"
  4. Leaving "Not set" behaves as before and inherits whatever default the proxy has
  5. Picking "Never resets" creates a key whose budget never resets, whatever the proxy default is

Relevant issues

Linear ticket

Pre-Submission checklist

  • 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

Type

🐛 Bug Fix
🧹 Refactoring

Caveats (if any)

  • Several unrelated UI polish fixes ride along in one commit
  • Vendored scroll-fade needs re-copying when upstream shadcn changes
  • Forms-plugin neutraliser is delete-on-sight once the plugin goes

Create Key offered two options labelled "Never resets" in the Reset Budget
dropdown. BudgetDurationDropdown renders its unset item using the caller's
placeholder, and create_key_button passed placeholder="Never resets" alongside
showNeverResets, so the omit option and the explicit-null option looked
identical while behaving differently. An omitted budget_duration picks up
default_key_generate_params and the linked budget tier's schedule, whereas the
"none" sentinel is converted to an explicit null and truly never resets. The
unset item now reads "Not set", matching getBudgetDurationLabel, and the
create-key test mock passes the placeholder through so a future collision fails
the suite

The rest is migration cleanup found during manual QA. The models and endpoints
tab strip hides its scrollbar and fades at the right edge using a vendored copy
of the shadcn scroll-fade utility, keeping the CLI package out of the build.
globals.css neutralises the @tailwindcss/forms resting-state rules for
combobox-chip-input, which lets twelve call sites drop the same copy-pasted
className workaround. Guardrails moves to the line tab variant and stops
clipping its textarea focus ring, the log drawer JSON tree takes the app
background, the audit log empty state centres, the caching page selects no
longer stretch to the row height, the usage page team filter shares its row
with the Export button through a new filterSlot prop, and the cost optimization
and vector store tab strips drop their leftover full-width divider
@greptile-apps

greptile-apps Bot commented Aug 15, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

The PR clarifies reset-budget choices and updates several dashboard surfaces to use consistent shadcn styling and composition.

  • Distinguishes the omitted reset schedule from the explicit “Never resets” option and adds regression coverage.
  • Adds shared combobox normalization and scroll-fade styling.
  • Integrates the team filter into the usage export header and adjusts tabs, empty states, buttons, and JSON-viewer colors.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename Overview
ui/litellm-dashboard/src/components/organisms/create_key_button.tsx Renames the unset budget-duration placeholder to “Not set” while retaining the explicit never-reset value.
ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx Extends the dropdown mock and verifies that the unset and explicit never-reset options have distinct labels and values.
ui/litellm-dashboard/src/app/globals.css Adds scroll-fade utilities and normalizes forms-plugin styles for shadcn combobox chip inputs.
ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx Adds a custom filter slot while preserving the built-in single- and multi-select filter implementations.
ui/litellm-dashboard/src/components/ui/button-group.tsx Introduces a reusable shadcn-style grouped-button primitive.
ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.tsx Migrates community links to shared button variants, button grouping, and data-driven rendering.

Reviews (2): Last reviewed commit: "Merge remote-tracking branch 'origin/lit..." | Re-trigger Greptile

Comment thread ui/litellm-dashboard/src/app/globals.css
Comment on lines +33 to +35
/* Verbatim end-edge subset of the shadcn scroll-fade utility (shadcn@4.17.0 dist/tailwind.css),
vendored so the CLI package is not a build dependency. Re-copy from upstream to update. */
@property --scroll-fade-e {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Stylesheet adds maintenance commentary

These vendoring and update notes duplicate implementation history in source comments, increasing the chance that the explanation drifts from the CSS; the same pattern also appears in the new forms-plugin override

Context Used: CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

@yuneng-berri

Copy link
Copy Markdown
Contributor Author

@greptile review again

@yuneng-berri
yuneng-berri enabled auto-merge August 15, 2026 07:46
@yuneng-berri
yuneng-berri merged commit 992a812 into litellm_internal_staging Aug 16, 2026
66 checks passed
@yuneng-berri
yuneng-berri deleted the litellm_shadcn_next_0814 branch August 16, 2026 00:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants