hub-client: UI/UX modernization Phase 4 — graceful narrow viewports - #613
Merged
Conversation
Viewport-matrix Playwright specs (1280/900/700/480/320px) over the editor shell (new composed #/dev/editor-shell harness routes), projects home, and every dialog, asserting no horizontal scroll and no clipped controls — 320px covers the WCAG 1.4.10 reflow floor. Fixes found by the matrix: - Dialogs cap height (100vh - 48px) and scroll their content section internally instead of clipping header/actions in short windows - Menus cap width (100vw - 48px); the 320px avatar menu no longer clips the left edge of a 320px window - ProjectsHome <=480px: single-column grid, header wraps (actions row + full-width search), project-row names keep an 8ch floor while metadata ellipsizes (names could squeeze to zero width) - Editor shell <=700px: summary-strip minimums 120-180 -> 80-120px; header project name truncates with ellipsis. <=480px: sidebar floor 180 -> 120px; MinimalHeader wraps to two rows (its left side could collapse to zero flex width, painting buttons under the right side) Designed narrow layouts (sidebar drawer, split-view collapse, header overflow menu) remain Phase 5. All 1280px characterization baselines are pixel-identical; new narrow snapshots reviewed visually.
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Self-review of the viewport matrix found one more 320px overflow the matrix didn't exercise: the peek popover (fixed 320px content-box, 360px with padding/border, anchored at the row's left edge) clipped 57px past the viewport's right edge. At <=480px it now spans its anchor's full width. New matrix specs pin both it and the row-menu submenu — the latter verified already-correct (the .qh-row .qh-menu rule overrides .qh-submenu's rightward positioning, keeping submenus inside the viewport at 320px and 1280px alike). Also fixes the changelog entry's commit link, which pointed at the pre-rewrite hash after the branch was rebased for push.
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.
Stacked on #611 (phase 3). Phase 4 of the UI/UX modernization plan (
claude-notes/plans/2026-08-25-hub-client-uiux-modernization.md).What this change does
Phase 4 makes small windows and split-screen use degrade gracefully — no horizontal scroll, no clipped controls — down to 320px, the WCAG 1.4.10 reflow floor (400% zoom at 1280px).
A new viewport-matrix spec suite drives the work: 44 layout assertions plus 34 screenshots across 1280 / 900 / 700 / 480 / 320px over projects home, every dialog, and the editor shell (via new composed
#/dev/editor-shellharness routes that render the real header, sidebar, and view-mode pane rules without Monaco/WASM). The matrix found four real defects at 320px, all fixed:100vh - 48px) and scroll the content section internally.Designed narrow layouts (sidebar drawer, split-view collapse, header overflow menu) remain Phase 5 design work, per the plan.
Tests
e2e/viewport-matrix.visual.spec.ts(78 specs), watched failing before the fixes (4 assertion failures at 320px); shared assertions live ine2e/helpers/visual.ts.lint:css,test:ci(1251 tests),test:visual(194 specs — all 1280px characterization baselines pixel-identical, confirming the fixes are media-query scoped or value-preserving),build:all.--update-snapshotsskips rewrites when the new capture is within the pixel tolerance — force-regenerate an affected PNG by deleting it and running with--update-snapshots=missing.recreate-all-snapshotsworkflow dispatch on this branch, as on phases 2–3.