Skip to content

fix: make dashboard design tokens contrast-safe#506

Merged
icebear0828 merged 2 commits into
devfrom
refactor/dashboard-design-system
May 12, 2026
Merged

fix: make dashboard design tokens contrast-safe#506
icebear0828 merged 2 commits into
devfrom
refactor/dashboard-design-system

Conversation

@icebear0828
Copy link
Copy Markdown
Owner

Summary\n\n- add a self-contained DESIGN.md for the Codex Proxy dashboard visual system\n- split readable primary text/container tokens from solid primary action tokens and map status/avatar foreground-container pairs through Tailwind\n- migrate repeated dashboard buttons, status chips, avatars, toggles, and active tab/filter states to semantic tokens\n- fix mobile dashboard tab wrapping and make AccountList storage access use window.localStorage for browser/jsdom consistency\n\nCloses #497.\n\n## Validation\n\n- npm run build\n- cd web && npx vitest run\n- npx vitest run tests/unit/web/theme.test.ts\n- npx @google/design.md lint DESIGN.md -> errors: 0, warnings: unused token references only\n- Headless Chrome visual check via Vite at 127.0.0.1:5175: overview light/dark desktop, usage dark desktop, settings light desktop, accounts dark mobile; mobile accounts horizontal overflow fixed from 211px to 0px\n\n## Known base issue\n\n- Full npm test is still blocked by #505: tests/unit/update-scripts-path.test.ts expects missing scripts/build/check-update.ts and scripts/build/apply-update.ts. Reproduced independently after rebasing onto latest origin/dev.\n

@icebear0828
Copy link
Copy Markdown
Owner Author

Extended browser smoke completed after the latest push (9099e85).

What changed after the first broad pass:

  • The full matrix initially found page-level horizontal overflow on #/logs at 390px mobile in both light and dark modes.
  • Fixed LogsPage by stacking the list/details panes on mobile and constraining the log table to an internal horizontal scroll container.
  • Added a LogsPage regression test for the responsive table/detail layout.

Browser smoke matrix (http://127.0.0.1:5175/, backed by local 8080 proxy):

  • Pages: #/, #/accounts, #/api-keys, #/proxies, #/usage-stats, #/logs, #/errors, #/settings
  • Viewports/themes: 1440x1000 light, 1440x1000 dark, 390x900 light, 390x900 dark
  • Result: 32 / 32 passed
  • Checks per case: #app rendered, main rendered, non-empty text, active tab computed foreground/background present, theme class correct, runtime exceptions = 0, console errors = 0, page-level horizontal overflow = 0
  • Screenshot + JSON evidence: /tmp/codex-proxy-ui-shots/full-smoke-rerun-2026-05-12T11-23-41-443Z/summary.json

Validation:

  • cd web && npx vitest run -> pass, 4 files / 11 tests
  • npx vitest run tests/unit/web/theme.test.ts -> pass, 14 tests
  • npm run build -> pass
  • npx @google/design.md lint DESIGN.md -> 0 errors, 62 existing unused-token warnings

Known blocker outside this PR:

@icebear0828 icebear0828 merged commit 28a106e into dev May 12, 2026
1 check passed
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