mirror of
https://github.com/BerriAI/litellm.git
synced 2026-09-12 23:01:41 +00:00
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.
This commit is contained in:
parent
43e7b96b83
commit
2b77e8c4db
1 changed files with 5 additions and 3 deletions
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue