fix(ui): keep cache leakage time range picker inline at narrow widths

[tin-berri]

TLDR

Problem this solves:

• Time range picker drops below the description at higher zoom
• Cache leakage header wastes a full row on the picker

How it solves it:

• Pin the picker right; let the description wrap instead
• Stack the header only below the md breakpoint

Relevant issues

• Keeps the cache leakage card's "Select Time Range" picker on the right edge of the header instead of letting it wrap onto its own line
• Lets the title and description column shrink and wrap to two lines, which is the behavior the header should have had
• Falls back to a stacked header below md, where the picker is too wide to sit beside anything

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)

On the tests box: this is a CSS-class-only change and jsdom does not compute layout, so any test here would assert className strings and pass whether or not the header actually renders correctly; that is a change detector, not a regression test. The existing CacheLeakageCard.test.tsx suite still passes (4/4), and the real verification is the before/after screenshots below

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

Screenshots to be attached: the Prompt Caching tab of the Cost Optimization page at a zoom level where the header no longer has room for both columns side by side

Before (at 43e7b96): the picker wraps under the description and sits on its own line above the tabs

After (at 2b77e8c): the description wraps to two lines and the picker stays flush right, in line with the title

Repro steps for both:

1. python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug --reload --use_v2_migration_resolver
2. npm run dev in ui/litellm-dashboard
3. Open http://localhost:3000/ui/?page=cost-optimization and select the Prompt Caching tab
4. At 100% zoom, confirm the picker is on the right of the header
5. Zoom to 150% and 175% and confirm the picker stays on the right while the description grows to two or three lines
6. Narrow the window below the md breakpoint and confirm the header stacks, with the picker under the description

Type

🐛 Bug Fix

Changes

CacheLeakageCard's header row was flex flex-wrap items-start justify-between gap-4 with the picker as a bare flex item. Under flex-wrap the picker is the element that gives way when the row runs short, so at higher zoom it wrapped onto its own line and pushed the tabs down

The header is now flex flex-col gap-4 md:flex-row md:items-start md:justify-between; the picker is wrapped in a shrink-0 div and the title/description column carries min-w-0, so the description is what gives way and wraps. AdvancedDatePicker needs roughly 440px (a w-[300px] trigger plus a whitespace-nowrap label), which is why the stacked layout is kept below md rather than squeezing it further

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR (no new tests; see the note under the pre-submission checklist)

[greptile-apps]

Greptile Summary

Updates the cache-leakage card header’s responsive layout.

• Stacks the description and time-range picker below the medium breakpoint.
• Keeps the picker fixed on the right at wider widths while allowing descriptive text to shrink and wrap.

Confidence Score: 5/5

The PR appears safe to merge with no actionable defects identified.

The isolated class changes preserve component behavior while making the header stack on small screens and allowing its text column to wrap beside the fixed-width picker at wider breakpoints.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx	Adjusts responsive flex behavior and picker sizing without introducing a concrete functional regression.

_{Reviews (1): Last reviewed commit: "fix(ui): keep cache leakage time range p..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_cache_leakage_header_layout (2b77e8c) with litellm_internal_staging (43e7b96)}