Noticed this on the Provider Dashboard today — the earnings numbers in the Fleet header are rendering on top of each other. Instead of five separate KPIs I get $0.0003$0.0003$0.0003$0.00033/91 smeared together, and the machine card's vitals do the same thing (THERMAL Nominal runs straight into MEMORY 57%). It's pretty obvious once you see it — I'll drop a screenshot in below.
Hit it on a normal laptop-width window with the sidebar open, one online machine, sub-cent earnings ($0.000350). Gets worse the narrower you make the window.
I dug into why: the grids in FleetHealthStrip.tsx and CardVitals.tsx pick their column count off the viewport width (sm:/md:/lg:), but the whole dashboard lives inside the sidebar + the max-w-6xl container + that 36%/1fr split. So it happily goes to 5 columns when each one is only ~100px wide, and $0.000350 is wider than that. Since the string has no spaces it can't wrap, so it just overflows into the next column. Classic "breakpoints assume the full viewport but something already ate half the width" situation.
I've got a fix going (switching those grids to container queries so they size off their actual container instead of the viewport, plus making the values wrap/shrink instead of overflow as a backstop). Checked it at a bunch of widths — 1320 / 1012 / 700 / 480px — and there's no overlap anywhere now; the numbers stay on one line when there's room and stack/wrap cleanly when it's genuinely tight. Tests and build are green. PR to follow.
Files involved:
console-ui/src/app/providers/dashboard/FleetHealthStrip.tsxconsole-ui/src/app/providers/dashboard/CardVitals.tsx
Noticed this on the Provider Dashboard today — the earnings numbers in the Fleet header are rendering on top of each other. Instead of five separate KPIs I get
$0.0003$0.0003$0.0003$0.00033/91smeared together, and the machine card's vitals do the same thing (THERMAL Nominalruns straight intoMEMORY 57%). It's pretty obvious once you see it — I'll drop a screenshot in below.Hit it on a normal laptop-width window with the sidebar open, one online machine, sub-cent earnings (
$0.000350). Gets worse the narrower you make the window.I dug into why: the grids in
FleetHealthStrip.tsxandCardVitals.tsxpick their column count off the viewport width (sm:/md:/lg:), but the whole dashboard lives inside the sidebar + themax-w-6xlcontainer + that36%/1frsplit. So it happily goes to 5 columns when each one is only ~100px wide, and$0.000350is wider than that. Since the string has no spaces it can't wrap, so it just overflows into the next column. Classic "breakpoints assume the full viewport but something already ate half the width" situation.I've got a fix going (switching those grids to container queries so they size off their actual container instead of the viewport, plus making the values wrap/shrink instead of overflow as a backstop). Checked it at a bunch of widths — 1320 / 1012 / 700 / 480px — and there's no overlap anywhere now; the numbers stay on one line when there's room and stack/wrap cleanly when it's genuinely tight. Tests and build are green. PR to follow.
Files involved:
console-ui/src/app/providers/dashboard/FleetHealthStrip.tsxconsole-ui/src/app/providers/dashboard/CardVitals.tsx