From 21aefb589dbcaff3d733b559ebeb7816f087de3f Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Tue, 5 May 2026 10:58:29 -0700
Subject: [PATCH] docs(roadmap): record visual layout audit

---
 docs/PRODUCTION_READINESS_HANDOFF_ROADMAP.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/PRODUCTION_READINESS_HANDOFF_ROADMAP.md b/docs/PRODUCTION_READINESS_HANDOFF_ROADMAP.md
index 4929873..946826f 100644
--- a/docs/PRODUCTION_READINESS_HANDOFF_ROADMAP.md
+++ b/docs/PRODUCTION_READINESS_HANDOFF_ROADMAP.md
@@ -159,7 +159,7 @@ Goal: remove local visual drift and meet interaction accessibility expectations.
 - [x] **P4.3** Audit web interactive elements for visible text or `aria-label`, including icon buttons, modals, editor controls, review actions, prompt actions, and settings. Commit: `01c2d31`; Verified: `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run test`; `rg -n "<button[^>]*>\\s*(&times;|✕|×|<X|<Menu|<Chevron|<Search|<Trash|<Share|<More)" web/src/app web/src/components --glob '!**/*.test.*'` now only reports the survey dismiss button, which has `aria-label="Dismiss survey"`; `git diff --check`. Added explicit accessible names for survey controls, editor toolbar and dismiss controls, note/workspace/link modals, settings form controls, artifact controls, and task review description.
 - [x] **P4.4** Audit mobile pressables/buttons for accessibility labels, roles, disabled states, and Dynamic Type tolerance. Commit: `f9903fe`; Verified: `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/mobile run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/mobile run test`; TypeScript AST audit confirmed `Pressable`/`TouchableOpacity` controls use labels and button roles, disabled controls expose disabled state, and `TextInput` fields are labeled; `git diff --check`. Added shared mobile accessibility helpers, applied accessible role/label/state coverage across auth, capture, intake, inbox, settings, note detail, prompt result, broadcast, and survey surfaces, and capped dense control text scaling while allowing content text to continue scaling.
 - [x] **P4.5** Replace custom web buttons/cards/badges with `@bytelyst/ui` or `@bytelyst/dashboard-components` where the shared component is appropriate. Keep notes editor-specific UI local. Commit: `d26a4ae`; Verified: `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run test`; custom-button grep audit returned no `btn`/inline primary/surface-muted button matches outside `web/src/components/NoteEditor.tsx`; stale shorthand token grep audit returned no `--nl-red`, `--nl-primary`, `--nl-orange`, `--nl-blue`, `--nl-accent`, `--nl-border`, or `--nl-surface` matches in app/component code; `git diff --check`. Added NoteLett token-wrapped `@bytelyst/ui` Button/Card/Badge primitives, mapped shared `--bl-*` aliases to `--nl-*`, replaced generic buttons/cards/badges across auth, shell, settings, prompts, modals, intake, workspace, chat, palace, survey, extracted tasks, and prompt result surfaces, and intentionally kept notes editor toolbar controls local.
-- [ ] **P4.6** Run visual checks for desktop and mobile web widths. Fix overlapping text, unstable toolbar dimensions, nested cards, or clipped controls. Commit:
+- [x] **P4.6** Run visual checks for desktop and mobile web widths. Fix overlapping text, unstable toolbar dimensions, nested cards, or clipped controls. Commit: `837a187`; Verified: Playwright visual audit with mocked local APIs captured landing, login, dashboard, workspaces, note detail, and settings at `1440x900` and `390x844`; the audit passed with no document horizontal overflow, viewport-overflowing controls, or clipped compact controls after excluding intentional offscreen skip/sidebar affordances; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run test`; `git diff --check`. Collapsed note detail and workspace fixed two-column grids below tablet width, wrapped note page actions, and reduced mobile main panel padding so narrow layouts stay inside the viewport.
 
 Acceptance criteria:
 - `rg "#[0-9a-fA-F]{3,8}|rgba?\\(" web/src mobile/src --glob '!**/*.test.*'` has only documented exceptions.