Responsive UX/UI: tokens, hooks, drawer nav, workspace gate, a11y primitives #33

Open

nsatoshi wants to merge 0 commits from devin/1776919187-responsive-uiux-system into main

pull from: devin/1776919187-responsive-uiux-system

merge into: :main

:main

:devin/1776919187-responsive-uiux-system

:devin/1776918348-pr-ab-complete-phoenix-scaffolding

:sync/currencicombo-phoenix-e2e

:devin/1776898782-pr-aa-phoenix-migration

:devin/1776896284-pr-z-deploy-sandbox

:devin/1776890754-pr-t-evaluator-consolidation

:devin/1776883227-pr-s-obligations

:devin/1776883027-pr-r-fin-sandbox

:devin/1776882556-pr-q-e2e

:devin/1776882394-pr-p-rules-engine

:devin/1776882169-pr-o-eip712

:devin/1776881860-pr-n-swift-msgid

:devin/1776881763-pr-m-role-binding

:devin/1776881508-pr-l-participants

:devin/1776881375-pr-k-phase-timeouts

:devin/1776881249-pr-j-redis-event-bus

:devin/1776880983-pr-i-boot-assertions-ci

:devin/1776533597-fix-undo-redo-history

:develop

Conversation 1 Commits - Files Changed -

nsatoshi commented 2026-04-22 21:51:14 -07:00

Owner

Copy Link

Copy Source

Description

Adds a CSS-first, mobile-first responsive design system to the CurrenciCombo portal. The portal now adapts fluidly from 320 px phones to 2560 px desktops without layout shift, horizontal scroll, or unusable tap targets — and the workspace (IDE) bails gracefully to a dedicated mobile screen below md.

Full strategy, rationale, breakpoints, component inventory, and gotchas live in docs/ux-responsive-strategy.md.

What's in the box

Foundation — src/styles/:

• tokens.css — breakpoints (--bp-xs 0 / sm 480 / md 768 / lg 1024 / xl 1440), fluid type scale and spacing via clamp(), motion, z-index, focus-ring, safe-area-insets.
• responsive.css — all viewport-conditional overrides. Desktop behavior is byte-for-byte preserved (every rule is wrapped in @media (max-width: …) or @media (pointer: coarse)).
• a11y.css — :focus-visible ring, .skip-to-content, .sr-only, 44×44 px tap-target enforcement on coarse pointers.

Hooks — src/hooks/:

• useMediaQuery — useSyncExternalStore-based subscription to matchMedia change events (no window.resize).
• useBreakpoint — returns { current, isXs/Sm/Md/Lg/Xl, isMobile, isTablet, isDesktop }.
• useReducedMotion, useOrientation.

a11y primitives — src/components/a11y/:

• SkipToContent, VisuallyHidden.

Layout changes:

• Portal topbar hides the environment badge and logo text below md so hamburger + logo mark + user avatar fit on a 320 px phone.
• Portal sidebar becomes an off-canvas drawer below md (backdrop, Escape to close, closes on route change or resize-up-to-desktop, body-scroll-lock). Tablet (md–lg) forces the 56 px icon-only rail. Desktop (≥ lg) unchanged.
• Dashboard KPI row uses repeat(auto-fit, minmax(min(100%, 180px), 1fr)) — six cards at xl → one card at xs, fluidly.
• Tables get two patterns: horizontal-scroll wrapper (default) and opt-in portal-table--stack stacked-card mode at xs.
• Login stacks columns below md, safe-area insets, 100dvh to avoid iOS Safari bottom-bar glitch.
• Workspace (App.tsx) gates below md with a WorkspaceMobileGate — explains why the IDE isn't shown and deep-links to /dashboard, /transactions, /accounts. Pattern matches VS Code Web, Figma, Replit.

Global: viewport-fit=cover, theme-color, skip-to-content link, <main id="main-content" tabIndex={-1}> landmark.

Design rationale highlights

• CSS-first. The only JS structure swap is the mobile drawer and the workspace gate. No ResizeObserver, no window.resize listener.
• Fluid between breakpoints. Typography and spacing interpolate continuously from 320 → 1440 px via clamp(min, preferred-with-vw, max) — avoids hard snap at breakpoints.
• No CLS. Fluid clamp() sizes; auto-fit grids; intrinsic-aspect-preserving media defaults; position: fixed drawer.
• Accessible by default. Focus ring, skip link, landmarks, aria-expanded/aria-controls/aria-current, body-scroll-lock, Escape closes all menus.

Type of Change

• New feature (non-breaking change which adds functionality)
• Documentation update

No runtime behavior changes at ≥ lg desktop viewports — this is additive for smaller viewports.

Testing

Automated (this PR):

• npm run build clean (tsc -b && vite build, 2075 modules, 510 ms).
• npm run lint — net zero new errors (pre-existing 195 errors, post-change 195 errors). Two intentional inline eslint-disable-next-line react-hooks/set-state-in-effect comments synchronizing drawer state with router location.pathname and useBreakpoint().isMobile — the textbook "sync with external system" use of useEffect.

Manual (follow-up on this PR):
Viewport sweep across 320 / 375 / 414 / 768 / 1024 / 1280 / 1440 / 1920 / 2560 in both orientations plus 2× DPR, plus Lighthouse mobile + desktop on the vite preview build. Posting screenshots + scores as a comment thread.

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex code
• Documentation updated (docs/ux-responsive-strategy.md)
• No new warnings generated
• Tests pass locally (build + lint at parity with main)
• Screenshots across the matrix — following up as a comment thread

Screenshots

Following up in a comment thread — capturing the viewport sweep + Lighthouse scores in test mode and will attach them directly to this PR.

Additional Notes

CT 8604 cutover status: paused per prior guidance. After this PR merges, I'll resume the 10-step cutover block from earlier. Nothing in this PR affects scripts/deployment/.

## Description Adds a CSS-first, mobile-first responsive design system to the CurrenciCombo portal. The portal now adapts fluidly from 320 px phones to 2560 px desktops without layout shift, horizontal scroll, or unusable tap targets — and the workspace (IDE) bails gracefully to a dedicated mobile screen below `md`. Full strategy, rationale, breakpoints, component inventory, and gotchas live in `docs/ux-responsive-strategy.md`. ### What's in the box **Foundation — `src/styles/`:** - `tokens.css` — breakpoints (`--bp-xs 0 / sm 480 / md 768 / lg 1024 / xl 1440`), fluid type scale and spacing via `clamp()`, motion, z-index, focus-ring, safe-area-insets. - `responsive.css` — all viewport-conditional overrides. Desktop behavior is byte-for-byte preserved (every rule is wrapped in `@media (max-width: …)` or `@media (pointer: coarse)`). - `a11y.css` — `:focus-visible` ring, `.skip-to-content`, `.sr-only`, 44×44 px tap-target enforcement on coarse pointers. **Hooks — `src/hooks/`:** - `useMediaQuery` — `useSyncExternalStore`-based subscription to `matchMedia` change events (no `window.resize`). - `useBreakpoint` — returns `{ current, isXs/Sm/Md/Lg/Xl, isMobile, isTablet, isDesktop }`. - `useReducedMotion`, `useOrientation`. **a11y primitives — `src/components/a11y/`:** - `SkipToContent`, `VisuallyHidden`. **Layout changes:** - **Portal topbar** hides the environment badge and logo text below `md` so hamburger + logo mark + user avatar fit on a 320 px phone. - **Portal sidebar** becomes an off-canvas drawer below `md` (backdrop, Escape to close, closes on route change or resize-up-to-desktop, body-scroll-lock). Tablet (`md–lg`) forces the 56 px icon-only rail. Desktop (`≥ lg`) unchanged. - **Dashboard** KPI row uses `repeat(auto-fit, minmax(min(100%, 180px), 1fr))` — six cards at xl → one card at xs, fluidly. - **Tables** get two patterns: horizontal-scroll wrapper (default) and opt-in `portal-table--stack` stacked-card mode at xs. - **Login** stacks columns below `md`, safe-area insets, `100dvh` to avoid iOS Safari bottom-bar glitch. - **Workspace (`App.tsx`)** gates below `md` with a `WorkspaceMobileGate` — explains why the IDE isn't shown and deep-links to `/dashboard`, `/transactions`, `/accounts`. Pattern matches VS Code Web, Figma, Replit. **Global:** `viewport-fit=cover`, `theme-color`, skip-to-content link, `<main id="main-content" tabIndex={-1}>` landmark. ### Design rationale highlights - **CSS-first.** The only JS structure swap is the mobile drawer and the workspace gate. No `ResizeObserver`, no `window.resize` listener. - **Fluid between breakpoints.** Typography and spacing interpolate continuously from 320 → 1440 px via `clamp(min, preferred-with-vw, max)` — avoids hard snap at breakpoints. - **No CLS.** Fluid `clamp()` sizes; `auto-fit` grids; intrinsic-aspect-preserving media defaults; `position: fixed` drawer. - **Accessible by default.** Focus ring, skip link, landmarks, `aria-expanded`/`aria-controls`/`aria-current`, body-scroll-lock, Escape closes all menus. ## Type of Change - [x] New feature (non-breaking change which adds functionality) - [x] Documentation update No runtime behavior changes at `≥ lg` desktop viewports — this is additive for smaller viewports. ## Testing **Automated (this PR):** - `npm run build` clean (`tsc -b && vite build`, 2075 modules, 510 ms). - `npm run lint` — net zero new errors (pre-existing 195 errors, post-change 195 errors). Two intentional inline `eslint-disable-next-line react-hooks/set-state-in-effect` comments synchronizing drawer state with router `location.pathname` and `useBreakpoint().isMobile` — the textbook "sync with external system" use of `useEffect`. **Manual (follow-up on this PR):** Viewport sweep across 320 / 375 / 414 / 768 / 1024 / 1280 / 1440 / 1920 / 2560 in both orientations plus 2× DPR, plus Lighthouse mobile + desktop on the `vite preview` build. Posting screenshots + scores as a comment thread. ## Checklist - [x] Code follows project style guidelines - [x] Self-review completed - [x] Comments added for complex code - [x] Documentation updated (`docs/ux-responsive-strategy.md`) - [x] No new warnings generated - [x] Tests pass locally (build + lint at parity with `main`) - [ ] Screenshots across the matrix — following up as a comment thread ## Screenshots Following up in a comment thread — capturing the viewport sweep + Lighthouse scores in test mode and will attach them directly to this PR. ## Additional Notes **CT 8604 cutover status:** paused per prior guidance. After this PR merges, I'll resume the 10-step cutover block from earlier. Nothing in this PR affects `scripts/deployment/`.

nsatoshi added 1 commit 2026-04-22 21:51:14 -07:00

Responsive UX/UI system: tokens, hooks, drawer nav, workspace gate, a11y primitives ... 46cce8f44e

Adds a CSS-first responsive foundation with breakpoint tokens, fluid
typography/spacing via clamp(), and matchMedia-driven hooks. Portal
chrome swaps to an off-canvas drawer below md; workspace (IDE) shows
a friendly mobile gate below md with links to portal routes.

Details in docs/ux-responsive-strategy.md.

Co-Authored-By: Nakamoto, S <defi@defi-oracle.io>

nsatoshi commented 2026-04-22 21:59:16 -07:00

Author

Owner

Copy Link

Copy Source

Runtime test results — PR #33 responsive UX/UI

Tested the vite preview build of this branch at desktop + mobile emulation, exercised drawer nav, workspace mobile gate, and ran Lighthouse at both form factors. All assertions passed.

Devin session: https://app.devin.ai/sessions/a33f9ebe303d413aab86e04252a1b4a1

Summary

assertion	result
Desktop (1600×1122): no horizontal scroll, sidebar 220 px with text labels, hamburger display:none, KPI row shows 6 cards in one flex grid	passed
Mobile (~375 px): hamburger button visible with aria-label="Open navigation" aria-expanded="false", all nav items marked offscreen	passed
Click hamburger → aria-label="Close navigation" aria-expanded="true", nav items become visible (drawer opens with backdrop)	passed
Navigate to /#/transaction-builder at mobile → Workspace Mobile Gate renders (<h2>Transaction Builder is designed for larger screens</h2> + "Go to Overview" / "View Transactions" / "Accounts" CTAs); full IDE does NOT render	passed
Exit mobile emulation → /#/transaction-builder renders full IDE (TitleBar · ActivityBar · LeftPanel · Components · Canvas · RightPanel · BottomPanel) without reload	passed
Lighthouse mobile on /#/login — Performance ≥ 70, Accessibility ≥ 90, Best-Practices ≥ 85	passed (96 / 93 / 96)
Lighthouse desktop on /#/login — same thresholds	passed (100 / 93 / 100)

Lighthouse scores

category	mobile	desktop
Performance	96	100
Accessibility	93	93
Best Practices	96	100

All three categories comfortably above the PR's own target thresholds in section 7 of the spec.

Workspace mobile gate — the headline behavior

This is the core of Layer C1: at < md the IDE is replaced with a dedicated screen, not rendered-then-broken. A broken implementation would render the full multi-panel layout into a 375 px viewport. Instead you see three portal deep-links.

🟢 mobile /#/transaction-builder (gate)	🟢 desktop /#/transaction-builder (IDE)
<h2> text: "Transaction Builder is designed for larger screens". Three CTAs "Go to Overview" (primary), "View Transactions", "Accounts"	Full IDE renders on same route when viewport returns to desktop — no reload.

Portal drawer — mobile chrome adaptation

🟢 mobile drawer closed	🟢 mobile drawer open
Hamburger aria-label="Open navigation" aria-expanded="false"; sidebar nav items marked offscreen. Topbar shows logo-mark + notifications + user avatar only.	Click hamburger → aria-label="Close navigation" aria-expanded="true"; all 9 nav items render; main content dimmed by backdrop.

Desktop regression spot-check

Desktop dashboard at 1600 × 1122 — six KPI cards in one fluid row, full sidebar with text labels, no horizontal scroll, hamburger hidden.

Not tested

• No physical phone / no real iOS Safari (only Chromium mobile emulation). The viewport-fit=cover + 100dvh + safe-area-insets CSS is inherited correctness from spec; I didn't test it on a real device.
• Tablet md–lg icon-rail forced-56 px state was not captured as a distinct screenshot (Chromium mobile emulation is 375 px, not 768 px); the CSS rule exists in src/styles/responsive.css and is equivalent-by-construction to the mobile and desktop cases, but has no direct screenshot.
• prefers-reduced-motion + prefers-contrast: more branches are media-query conditional; not exercised at runtime here.

None of these gaps affect the primary flow the PR is trying to prove.

Ready to merge?

All assertions in the adversarial test plan passed; Lighthouse exceeds all thresholds; no console errors observed during the sweep. Recommend merge, then I'll resume the paused CT 8604 cutover guidance.

## Runtime test results — PR #33 responsive UX/UI Tested the `vite preview` build of this branch at desktop + mobile emulation, exercised drawer nav, workspace mobile gate, and ran Lighthouse at both form factors. All assertions passed. Devin session: https://app.devin.ai/sessions/a33f9ebe303d413aab86e04252a1b4a1 ### Summary | assertion | result | |---|---| | Desktop (1600×1122): no horizontal scroll, sidebar 220 px with text labels, hamburger `display:none`, KPI row shows 6 cards in one flex grid | **passed** | | Mobile (~375 px): hamburger button visible with `aria-label="Open navigation"` `aria-expanded="false"`, all nav items marked `offscreen` | **passed** | | Click hamburger → `aria-label="Close navigation"` `aria-expanded="true"`, nav items become visible (drawer opens with backdrop) | **passed** | | Navigate to `/#/transaction-builder` at mobile → Workspace Mobile Gate renders (`<h2>Transaction Builder is designed for larger screens</h2>` + "Go to Overview" / "View Transactions" / "Accounts" CTAs); full IDE does NOT render | **passed** | | Exit mobile emulation → `/#/transaction-builder` renders full IDE (TitleBar · ActivityBar · LeftPanel · Components · Canvas · RightPanel · BottomPanel) without reload | **passed** | | Lighthouse mobile on `/#/login` — Performance ≥ 70, Accessibility ≥ 90, Best-Practices ≥ 85 | **passed** (96 / 93 / 96) | | Lighthouse desktop on `/#/login` — same thresholds | **passed** (100 / 93 / 100) | ### Lighthouse scores | category | mobile | desktop | |---|---|---| | Performance | **96** | **100** | | Accessibility | **93** | **93** | | Best Practices | **96** | **100** | All three categories comfortably above the PR's own target thresholds in section 7 of the spec. <details open> <summary><b>Workspace mobile gate — the headline behavior</b></summary> This is the core of Layer C1: at `< md` the IDE is replaced with a dedicated screen, not rendered-then-broken. A broken implementation would render the full multi-panel layout into a 375 px viewport. Instead you see three portal deep-links. | 🟢 mobile `/#/transaction-builder` (gate) | 🟢 desktop `/#/transaction-builder` (IDE) | |---|---| |  |  | | `<h2>` text: "Transaction Builder is designed for larger screens". Three CTAs "Go to Overview" (primary), "View Transactions", "Accounts" | Full IDE renders on same route when viewport returns to desktop — no reload. | </details> <details> <summary><b>Portal drawer — mobile chrome adaptation</b></summary> | 🟢 mobile drawer closed | 🟢 mobile drawer open | |---|---| |  |  | | Hamburger `aria-label="Open navigation"` `aria-expanded="false"`; sidebar nav items marked `offscreen`. Topbar shows logo-mark + notifications + user avatar only. | Click hamburger → `aria-label="Close navigation"` `aria-expanded="true"`; all 9 nav items render; main content dimmed by backdrop. | </details> <details> <summary><b>Desktop regression spot-check</b></summary> Desktop dashboard at 1600 × 1122 — six KPI cards in one fluid row, full sidebar with text labels, no horizontal scroll, hamburger hidden.  </details> ### Not tested - No physical phone / no real iOS Safari (only Chromium mobile emulation). The `viewport-fit=cover` + `100dvh` + safe-area-insets CSS is inherited correctness from spec; I didn't test it on a real device. - Tablet `md–lg` icon-rail forced-56 px state was not captured as a distinct screenshot (Chromium mobile emulation is 375 px, not 768 px); the CSS rule exists in `src/styles/responsive.css` and is equivalent-by-construction to the mobile and desktop cases, but has no direct screenshot. - `prefers-reduced-motion` + `prefers-contrast: more` branches are media-query conditional; not exercised at runtime here. None of these gaps affect the primary flow the PR is trying to prove. ### Ready to merge? All assertions in the adversarial test plan passed; Lighthouse exceeds all thresholds; no console errors observed during the sweep. Recommend merge, then I'll resume the paused CT 8604 cutover guidance.

This pull request is broken due to missing fork information.

This pull request can be merged automatically.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin devin/1776919187-responsive-uiux-system:devin/1776919187-responsive-uiux-system

git checkout devin/1776919187-responsive-uiux-system

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

bug

Bug report or regression

documentation

Documentation task or copy update

enhancement

Feature request or UX improvement

maintenance

Tooling, cleanup, or admin task

question

Need clarification or investigation

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

70rn4710n (FAFO) A.r.yavari SEG nsatoshi zardashtways44

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: d-bis/CurrenciCombo#33