Dashboard — UX batch¶
Motivation¶
Continuation of the UI/UX pass on the Dashboard / Monitor surface. Most candidates were already implemented in this mature area, so this batch lands only the two genuine gaps and leaves the rest untouched.
Verified-already-present (left untouched): unified card skeletons (
RowSkeleton+.skeleton, tokens just fixed 2026-06-21), shared degraded tone (DegradedNotice), "n ago" labels (useRelativeTime), cluster status AA colors (.gt-*), empty jobs CTA (JobsEmptyState), responsive single- column grid (.dashboard-grid@768px). Deferred (need a shared refresh clock or per-card refetch wiring + visual verification):RefreshRingcountdown integration (#33) and a retry action onDegradedNoticecards (#40).
User-facing change¶
- #37 Toast stack cap — at most four toasts now stack at once; a rapid-fire burst (e.g. a failing poll retrying) drops the oldest overflow immediately instead of burying the screen.
- #39
.tabular-numsutility — a shared class for the existing ad-hocfont-variant-numeric: tabular-numsconvention, so future numeric columns align without re-declaring the inline style.
Code change summary¶
- web/src/components/Toast.tsx:
MAX_TOASTS = 4; thetoast()reducer slices to the most recent four. - web/src/theme/glass.css:
.tabular-numsutility class.
Validation evidence¶
cd web && npm run build→ clean.npx eslint src/components/Toast.tsx→ clean.
No backend / API / IaC changes.