fix(console-ui): stop provider dashboard KPI/vitals text overlap#425
Open
YellowFoxH4XOR wants to merge 2 commits into
Open
fix(console-ui): stop provider dashboard KPI/vitals text overlap#425YellowFoxH4XOR wants to merge 2 commits into
YellowFoxH4XOR wants to merge 2 commits into
Conversation
The fleet KPI strip and machine-card vitals rendered their value text piled on top of neighboring columns (e.g. $0.0003$0.0003$0.0003, THERMAL Nominal/MEMORY 57%). Root cause: grid column counts were keyed off the viewport via sm:/md:/lg: breakpoints, but the dashboard lives inside a sidebar + max-w-6xl container + 36%/1fr split, so columns went to their max count while only ~100px wide. Unbreakable value strings then overflowed visible into the next cell. Convert the affected grids to container queries so column counts track the element's real width, and make values overflow-safe as a fallback: - FleetHealthStrip: strip root is an @container; verdict/KPI split is @3xl (stacks below that instead of cramming the verdict onto the numbers); KPI region is an @container with columns 2 -> @md:3 -> @2XL:5; cells get min-w-0 + break-words; hero value text-2xl -> text-xl. - CardVitals: vitals block is an @container; grid 2 -> @lg:4; each row gets min-w-0, label truncate, value shrink-0. Verified in-browser at 1320/1012/700/480px: zero box overlaps at every width (values stay one line where there's room, wrap gracefully when genuinely narrow). eslint clean, 15/15 dashboard tests, build compiles.
|
@YellowFoxH4XOR is attempting to deploy a commit to the EigenLabs Team on Vercel. A member of the Team first needs to authorize it. |
The prior KPI-overlap fix (Layr-Labs#425) switched to container queries but with breakpoints that misbehaved inside the max-w-6xl shell: - The verdict/KPI split keyed off @3xl (48rem ~768px strip), so a narrow desktop went side-by-side too early and crammed the right region. Raise to @5XL (64rem) so the split mirrors the original lg viewport intent and only fires where the 5-column KPI row actually fits. - Keep the KPI row at @2XL:grid-cols-5 (not @5XL): @5XL keys off the right-region container reaching 64rem, which never happens in the 72rem shell, so it would have permanently capped the row at 3 columns. - Add min-w-0 to the Vital grid item so a long value can't push its track past its 1fr allocation and overlap the neighbor. Verified live across strip widths (lint/test/build green): split only at strip >=64rem, 5-column KPIs when the keyed region >=42rem, no overlap.
|
Good one, earnings table is indeed unreadable on mobile (portrait). Bump! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The provider dashboard's fleet-health strip crammed KPI values and vital
labels into each other at certain widths. This reworks the strip to use
container queries keyed off the strip's real width (not the viewport), with
breakpoints chosen so the side-by-side split only fires where the 5-column
KPI row actually fits, and adds an overflow guard so a long vital value can't
push its column past its
1frallocation and overlap the neighbor.Linked issue
Closes #424
Test plan
make ui-lint— 0 errors (pre-existing warnings only)make ui-test— 309 vitest tests pass (incl.MachineCard,CardVitals-adjacent suites)make ui-build— Next build succeeds, no unknown-breakpoint warningsLive Chrome DevTools sweep across strip widths — measured computed
grid-template-columnsand per-column overflow at each step:Split fires only at strip ≥64rem; 5-column KPIs appear when the keyed
region ≥42rem; no KPI/vital value clips into a neighbor with real data.
Components touched
Protocol / interface changes
Notes for reviewers
from
@3xl(48rem, ~768px — split fired too early on narrow desktops) to@5xl(64rem, the originallgviewport intent expressed as a containerquery).
@2xl:grid-cols-5, not@5xl:@5xlwould key off the right-region container reaching 64rem, which neverhappens inside the
max-w-6xl(72rem) shell, so it would permanently capthe row at 3 columns and kill the 5-column layout.
under the 42rem trigger), so it shows 3 clean columns rather than 5. That
preserves the no-overlap guarantee, which is the actual goal.
@3xl/@2xlwere undefined in Tailwindv4 — they are defined (48rem / 42rem). The real issue was the threshold
values, not missing utilities.