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..3bc5443b2ea 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,22 +102,19 @@ 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">
+              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
                 {subject} sending large volumes of uncached input with a low cache hit rate are likely missing prompt
                 caching. Potential savings is approximate: uncached input priced at the realized cache-read discount.
-                {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}
-            onValueChange={(value) => setDimension(value === "model" ? "model" : "key")}
-            className="mt-3"
-          >
+          <Tabs value={dimension} onValueChange={(value) => setDimension(value === "model" ? "model" : "key")}>
             <TabsList>
               <TabsTrigger value="key">By virtual key</TabsTrigger>
               <TabsTrigger value="model">By model</TabsTrigger>
diff --git a/ui/litellm-dashboard/src/components/ui/card.tsx b/ui/litellm-dashboard/src/components/ui/card.tsx
index 3fc0aa65264..1490c2ee908 100644
--- a/ui/litellm-dashboard/src/components/ui/card.tsx
+++ b/ui/litellm-dashboard/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"di
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className,
       )}
       {...props}