Polish responsive shell and accessibility

[BigSimmo]

Summary

• keep the standalone mobile shell constrained to the viewport so the app owns scrolling
• improve mode-menu keyboard dismissal and decorative icon semantics
• align motion, sheet backdrop, glass, and forced-colour treatments with design tokens
• add focused UI regression coverage and the completed design QA record

Verification

• npm run verify:cheap (all static/type checks passed; full Vitest run had two 30s resource-contention timeouts, both passed individually: architecture boundaries 6/6 and worker bundle 1/1)
• TypeScript and scoped Prettier/ESLint
• Chromium: mobile app scrollport 1/1, mode-menu keyboard 1/1, document disclosure integration, accessibility media/axe 5/5
• pre-merge design pass: npm run verify:ui (175/175)

Provider checks

• No Supabase, OpenAI, or other live provider workflows were run.

Summary by CodeRabbit

• Accessibility

  • Improved keyboard navigation so app mode menus close correctly when focus moves away.
  • Decorative icons are now hidden from screen readers.
  • Improved support for forced-color display settings.

• Mobile Experience

  • Enhanced small-screen search and formulation layouts to use the full viewport and maintain reliable scrolling.

• Visual Refinements

  • Updated overlays and action controls to better follow theme settings and respect reduced-motion preferences.

• Quality

  • Added coverage for mobile scrolling, keyboard interactions, and responsive behavior.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: af650c5a-8351-4310-a558-09a90791e17a

📥 Commits

Reviewing files that changed from the base of the PR and between 2155e35 and 47b58dd.

📒 Files selected for processing (14)

• .github/workflows/codex-autofix-review-comments.yml
• AGENTS.md
• design-qa.md
• docs/branch-review-ledger.md
• docs/codex-review-protocol.md
• scripts/check-codex-autofix-workflow.mjs
• src/app/globals.css
• src/components/clinical-dashboard/global-search-shell.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• src/components/clinical-dashboard/mode-action-popup.tsx
• src/components/ui/sheet.tsx
• tests/codex-autofix-workflow.test.ts
• tests/ui-formulation.spec.ts
• tests/ui-smoke.spec.ts

---

📝 Walkthrough

Walkthrough

The PR adds smart Codex auto-resolve routing based on labels and changed-file risk, expands workflow validation and tests, and applies responsive, keyboard, accessibility, motion, forced-color, and overlay-token updates with associated QA records.

Changes

Codex auto-resolve routing

Layer / File(s)	Summary
Changed-file and label routing .github/workflows/codex-autofix-review-comments.yml	The request script applies label precedence, classifies changed files, evaluates source complexity and churn thresholds, skips low-risk changes, and embeds routing reasons in the prompt.
Routing contract and validation AGENTS.md, docs/codex-review-protocol.md, scripts/check-codex-autofix-workflow.mjs, tests/codex-autofix-workflow.test.ts	Guidance and workflow guards define smart routing, while tests cover labels, file filtering, thresholds, trusted filenames, pagination, and permission failures.

Responsive and accessibility polish

Layer / File(s)	Summary
Mobile scroll ownership src/components/clinical-dashboard/global-search-shell.tsx, tests/ui-formulation.spec.ts, design-qa.md	The mobile shell uses fixed full-viewport positioning, and regression coverage checks that #main-content owns scrolling.
Menu accessibility and overlay tokens src/components/clinical-dashboard/master-search-header.tsx, src/components/clinical-dashboard/mode-action-popup.tsx, src/components/ui/sheet.tsx, src/app/globals.css, tests/ui-smoke.spec.ts, design-qa.md	Menus close on Tab, decorative icons are hidden from assistive technology, press scaling is motion-safe, and overlay colors use design tokens with forced-color overrides.
QA evidence and review records design-qa.md, docs/branch-review-ledger.md	QA scope, viewport evidence, verification results, findings, final blocked status, and the review ledger entry are recorded.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant RequestScript
  participant GitHubAPI
  participant Codex
  RequestScript->>GitHubAPI: Read labels and changed files
  GitHubAPI-->>RequestScript: Return routing metadata
  RequestScript->>RequestScript: Compute route reasons
  RequestScript->>Codex: Submit resolve prompt with route marker

Loading

Possibly related PRs

• BigSimmo/Database#455: Related Codex workflow routing, marker handling, validator, and test changes.
• BigSimmo/Database#454: Related auto-fix routing guidance and workflow guard checks.
• BigSimmo/Database#610: Related request prompt markers and Codex auto-resolve gating.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: responsive shell and accessibility polish.
Description check	✅ Passed	The description covers the required summary and verification details; only the Notes section is omitted.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/design-polish-pass

---

_{Comment @coderabbitai help to get the list of available commands.}