From fca0ad7c05e786716f68515f3c5b0312430e0629 Mon Sep 17 00:00:00 2001 From: tin-berri Date: Thu, 23 Jul 2026 21:53:42 -0700 Subject: [PATCH 1/3] Merge pull request #34439 from BerriAI/litellm_cache_leakage_header_layout fix(ui): keep cache leakage time range picker inline at narrow widths (cherry picked from commit c93c3f7582f98f84243715799268bebafe8c3c69) --- .../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 = ({ activity }) => { -
-
+
+
Cache leakage by {dimension === "model" ? "model" : "virtual key"}

{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 = ({ activity }) => { {dimension === "model" ? " Limited to Anthropic (Claude) models, which support prompt caching." : ""}

- +
+ +
Date: Tue, 28 Jul 2026 10:12:00 -0700 Subject: [PATCH 2/3] Fix cache leakage card layout to keep date picker on right (#34885) * Fix cache leakage card layout to keep date picker on right and prevent content overlap Removes flex-wrap and mt-3 to ensure date picker stays pinned to the right side of the card header regardless of zoom level, preventing it from covering card content below * Remove overflow-hidden from Card to allow dropdowns and overlays to display fully Fixes date picker dropdown being clipped when opened in cards like the Cache Leakage Card. By removing overflow-hidden from the Card container, popovers, dropdowns, and other overflow content can now display properly without being clipped by the card boundaries. * Make cache leakage card descriptions consistent with line clamping Adds line-clamp-2 to ensure both 'by model' and 'by virtual key' cards maintain consistent height. Removes conditional anthropic-specific text that caused height variations between dimensions. (cherry picked from commit d91fd084f7140f53cee67696fbd70edf84818a9a) --- .../cost-optimization/_components/CacheLeakageCard.tsx | 4 +--- ui/litellm-dashboard/src/components/ui/card.tsx | 2 +- 2 files changed, 2 insertions(+), 4 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 4f1cfc49569..bb2cb865877 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 @@ -105,10 +105,9 @@ const CacheLeakageCard: React.FC = ({ activity }) => {
Cache leakage by {dimension === "model" ? "model" : "virtual key"} -

+

{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." : ""}

@@ -118,7 +117,6 @@ const CacheLeakageCard: React.FC = ({ activity }) => { setDimension(value === "model" ? "model" : "key")} - className="mt-3" > By virtual key 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.forwardRefimg: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} From 9f3c51fef6b5e86f1b4a802c2a6c711134a80476 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Tue, 28 Jul 2026 10:19:39 -0700 Subject: [PATCH 3/3] style(ui): format cache leakage card after cherry-pick Dropping className="mt-3" from in #34885 shortened the line enough that prettier wants the props back on one line; the PR merged with frontend-lint red, so the pick inherits the violation. --- .../cost-optimization/_components/CacheLeakageCard.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 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 bb2cb865877..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 @@ -114,10 +114,7 @@ const CacheLeakageCard: React.FC = ({ activity }) => {
- setDimension(value === "model" ? "model" : "key")} - > + setDimension(value === "model" ? "model" : "key")}> By virtual key By model