From 2b77e8c4dba4567676c46bc19717877908ce91c1 Mon Sep 17 00:00:00 2001
From: Tin Chi Lo <tin@berri.ai>
Date: Thu, 23 Jul 2026 15:38:42 -0700
Subject: [PATCH] fix(ui): keep cache leakage time range picker inline at
 narrow widths

The card header used flex-wrap, so the date picker was the element that
gave way when the row ran out of room; at higher browser zoom it dropped
onto its own line under the description. Pin the picker with shrink-0 and
let the title/description block shrink instead (min-w-0), so the copy
wraps to a second line and the picker stays on the right. Below md the
header stacks, since a 300px input plus its nowrap label leaves nothing
usable beside it.
---
 .../cost-optimization/_components/CacheLeakageCard.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
index bd0ecea9483..4f1cfc49569 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
@@ -102,8 +102,8 @@ const CacheLeakageCard: React.FC<CacheLeakageCardProps> = ({ activity }) => {
     <TooltipProvider delay={300}>
       <Card>
         <CardHeader>
-          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div>
+          <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+            <div className="min-w-0">
               <CardTitle>Cache leakage by {dimension === "model" ? "model" : "virtual key"}</CardTitle>
               <p className="mt-1 text-sm text-muted-foreground">
                 {subject} sending large volumes of uncached input with a low cache hit rate are likely missing prompt
@@ -111,7 +111,9 @@ const CacheLeakageCard: React.FC<CacheLeakageCardProps> = ({ activity }) => {
                 {dimension === "model" ? " Limited to Anthropic (Claude) models, which support prompt caching." : ""}
               </p>
             </div>
-            <AdvancedDatePicker value={dateValue} onValueChange={onDateChange} />
+            <div className="shrink-0">
+              <AdvancedDatePicker value={dateValue} onValueChange={onDateChange} />
+            </div>
           </div>
           <Tabs
             value={dimension}