Skip to content

fix(ui): improve service dashboard readability - #8

Open
Adiker wants to merge 2 commits into
mainfrom
fix/dashboard-readability
Open

Adiker wants to merge 2 commits into
mainfrom
fix/dashboard-readability

Conversation

@Adiker

@Adiker Adiker commented Oct 22, 2026 •

Copy link
Copy Markdown
Owner

Summary

Service status and latency were rendered at about 11.5px, with truncated names and crowded two-line tiles. Give each tile separate name, status, and labeled latency rows, with 16px names, 14px measurements, and space reserved for updates. Retain five desktop columns and three tablet columns; use one column at 720px and below. Keep desktop tiles compact by reserving a single line per metric and reducing empty padding/gaps, so the dashboard retains its original footprint with larger text.

Emphasize the overall count, remove the timestamp's pill, use tabular latency digits, and darken dashboard status colors in the light theme. Preserve DOM IDs, service order, polling, endpoints, storage keys, and accessibility hooks. Update EN/PL documentation and asset versions. Earlier local header changes are excluded.

Validation

  • node --check js/app.js and git diff --check passed.
  • PYTHONDONTWRITEBYTECODE=1 python3 -m unittest discover -s ops/muse-status -p 'test_*.py': 8 passed.
  • Static hosting smoke checks: HTML, CSS, JavaScript, both local logos, and custom domain passed.
  • Isolated headless Chromium/Brave: 672 checks across 320/360/390/430/720/980/1080/1440px, EN/PL, Dark/Light/OLED, and 100%/200% reflow (200% simulated by halving the CSS viewport). Covered all four status states, unavailable latency, and 0/123/9999ms; dashboard text remained visible, tile heights remained stable during state/latency changes, and column counts matched the breakpoints.
  • Controlled HTTP 200/503 probes, language/theme controls, keyboard arrows and wrapping, skip link, focus outline, and history expansion passed. No JavaScript errors, duplicate IDs, or broken ARIA references.
  • Desktop height regression: 24 comparisons at 981/1080/1252/1440px in EN/PL and all three themes passed against origin/main. At the reported 1252px width, reduce the dashboard from 311px to 240px (original: 241px); the page fits the original 1330px viewport again. Also compared both open browser tabs at the same current viewport: local page 1317px, production page 1318px.
  • Sampled rendered dashboard text contrast across themes/states: minimum 4.90:1. Reviewed before/after desktop and mobile screenshots.

Existing limitation

At simulated 200% zoom on 320–390px screens (160–195 CSS pixels), the page still overflows horizontally outside the dashboard. Reproduced on clean origin/main; the header and other sections already exceed those widths. The dashboard passes its own containment checks. Fixing those sections is outside this dashboard-only change.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant