Skip to content

Fix cache leakage card layout to keep date picker on right #34885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shin-berri merged 3 commits into from
Jul 28, 2026
Merged

Fix cache leakage card layout to keep date picker on right #34885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1f64767
Fix cache leakage card layout to keep date picker on right and preven…
tin-berri Jul 28, 2026
6d4a016
Remove overflow-hidden from Card to allow dropdowns and overlays to d…
tin-berri Jul 28, 2026
f52322e
Make cache leakage card descriptions consistent with line clamping
tin-berri Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,9 @@ const CacheLeakageCard: React.FC<CacheLeakageCardProps> = ({ activity }) => {
<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>
<div className="shrink-0">
Expand All @@ -118,7 +117,6 @@ const CacheLeakageCard: React.FC<CacheLeakageCardProps> = ({ activity }) => {
<Tabs
value={dimension}
onValueChange={(value) => setDimension(value === "model" ? "model" : "key")}
className="mt-3"
>
<TabsList>
<TabsTrigger value="key">By virtual key</TabsTrigger>
Expand Down
2 changes: 1 addition & 1 deletion ui/litellm-dashboard/src/components/ui/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading