root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): scale stats values to fit metric box without overflow

Browse Source 
Token counts on the task detail Stats panel could overflow the metric
box for large values (e.g. 10-digit comma-separated totals). Switched
each metric to a container-query inline-size context and gave the
value a fluid font-size of `clamp(13px, 13cqw, 28px)` so it grows to
fill the box up to a 28px cap and shrinks down to 13px on narrow grid
columns. Combined with `min-width: 0`, `overflow-wrap: anywhere`, and
the metric's `overflow: hidden`, long values now stay within the box
and short values render as large as they can without dominating.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-04-27 20:06:06 -07:00
parent f3d918997c
commit aa86dcc05c
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/dashboard/app/components/TaskTokenStatsPanel.css
View File

@@ -41,6 +41,12 @@
display: flex;
flex-direction: column;
gap: var(--space-xs);
/* Establish an inline-size container so the value can scale itself to
the metric's actual width — keeps long token counts (8-10+ digits with
thousand separators) inside the box on narrow grid columns. */
container-type: inline-size;
min-width: 0;
overflow: hidden;
}
.task-token-stats-panel__label {
@@ -52,9 +58,20 @@
.task-token-stats-panel__value {
font-family: var(--font-mono);
font-size: calc(var(--space-lg) + var(--space-xs));
/* Fluid size: scales with the metric's container width so values are as
large as they can be without overflowing the box. The cqw factor is
tuned so a 10-digit comma-separated count (e.g. 1,234,567,890) at the
monospace width still fits inside the metric's padded inline area;
the ceiling lets short values look bold without becoming oversized. */
font-size: clamp(13px, 13cqw, 28px);
color: var(--text);
font-weight: 700;
min-width: 0;
/* Safety net: if a value somehow exceeds the calculated width (e.g. a
non-digit unit suffix in formatDuration), break instead of overflowing. */
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.15;
}
.task-token-stats-panel__timestamps {