feat(ui): implement DevDeck Light visual system - #7
Draft
XiaojuCH wants to merge 4 commits into
Draft
Conversation
…ort-fill, responsive IA, UI Scale toggle
Root cause fixed: broken vertical scale hierarchy where semantic labels,
badges and controls were shrunk to 9-11px to fake density.
Phase 1 — Typography normalization
- html { font-size: 15px } rem anchor; body switches to 1rem
- All semantic/interactive text converted to rem (0.7–1.47rem range)
- Minimum readable size: 0.7rem (10.5px) for badges/technical detail
- Key fixes: severity badge 9px→0.73rem, navigator tags 9px→0.7rem,
overview-row labels 9px→0.73–0.8rem, status bar 10px→0.73rem,
runtime-label 10px→0.73rem, diagnosis-copy h2 14px→1rem
- Decorative px preserved: borders, dot indicators, icon sizes
Phase 2 — Control sizing
- Primary CTA (复制给AI): min-height 32px, padding 0 14px, font-weight 600
- Secondary toolbar buttons: min-height 28px
- Lang toggle: min-height 28px, min-width 40px
- Advanced-report nested buttons: min-height 24px
- navigator-symbol box: 18px→20px
Phase 3 — Viewport-filling desktop layout
- .app-shell: min-height→height 100%, overflow: hidden
- .results: flex: 1 1 0, min-height: 0, display flex column
- .results-layout: flex: 1 1 0, min-height: 0
- .finding-navigator + .result-detail: overflow-y: auto, min-height: 0
- .statusbar: flex: 0 0 auto, margin-top: 0 (was 17px)
- Both panes now scroll independently; no blank space at fullscreen
Phase 4 — Responsive IA
- 1440px+: sidebar 288px, context-grid 1.4fr / 0.6fr
- 1900px+: three-column layout (sidebar | main | context rail 300px)
overview-panel promoted to grid-column 3 via display:contents on
context-grid; no fake content added
- ≤820px: single-column compact unchanged; no sub-12px text remains
- ≤620px: scale-picker hidden
Phase 5 — User UI Scale toggle
- CSS zoom: var(--ui-zoom, 1) on html element
- Four levels: 90 / 100 / 110 / 125 %
- Segmented .scale-picker in topbar-meta
- localStorage key 'ec-ui-zoom' for persistence across restarts
- Applied via useEffect → document.documentElement.style.setProperty
Build: frontend ✓ (vite 725ms), Tauri release ✓ (NSIS + MSI)
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
1 participant
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\n\n- implement the owner-approved DevDeck Light desktop shell with P2 Cool Scientific tokens\n- add Finding navigator with problem findings above healthy runtime checks\n- promote the evidence-backed primary finding with Current vs Required, configuration/terminal evidence, and Next step\n- preserve Preview 2 diagnosis, read-only, sanitizer, localization, and sharing behavior\n- add responsive 820/1040/1440 layouts, keyboard focus affordances, reduced-motion fallback, and compact status bar\n\n## Validation\n\n- npm test — 3 passed\n- npm run build — passed\n- cargo fmt --all -- --check — passed\n- cargo test --all-targets — 33 passed\n- cargo clippy --all-targets --all-features -- -D warnings — passed\n- npm audit --audit-level=high — 0 vulnerabilities\n- npm run tauri:build — release EXE, NSIS setup, and MSI produced\n- real Tauri Home shell launched and visually inspected at the 1040px baseline\n\n## Known limitation\n\nComputer Use was stopped by the user while the native project-folder dialog was open, so the real DevDeck Light runtime-mismatch screenshot and full Windows state matrix still need a follow-up capture before merge. Existing README screenshots were intentionally not replaced with non-equivalent or prototype imagery.\n\nCloses #6\n\nKeep this PR in Draft; do not merge.