Add Dictionary Browse header redesign study with three directions

[BigSimmo]

Summary

• Adds a runnable design study at /mockups/dictionary-browse-header (src/components/dictionary-browse-header-mockups.tsx) that renders the Dictionary → Browse header as it ships today beside three rebuilt directions, each at 1440 px and in a scrollable 390 px phone frame.
• The brief was to remove the description line under Browse terms and the orphaned A–Z / Z–A sort pill that floats alone on its own row, then rebuild the layout for the phone. All three directions do both, and all three move sort into the Filters sheet, which is where the other search modes already keep it. Today's header stacks five bands before the first result on a 390 px phone, so the first row lands below the fold.
• 01 Compact title bar — title and count share a line; the view switch and the letter rail fuse into one sticky control band. Lowest migration risk, keeps both browse views explicit. Two bands on phone.
• 02 Fused letter rail (recommended) — the A–Z / Abbreviations segment disappears entirely; All and Abbr become pinned lead chips on the letter rail itself, so one row does both jobs. Largest vertical saving; the trade-off is that Abbreviations reads as a peer of a letter rather than a separate view. Two bands on phone.
• 03 Index rail + jump sheet — no horizontal scroller at all; the title carries the active scope and opens a jump sheet, with a Contacts-style index rail on the right edge of the list and sticky letter headings. Results start after one band and it scales past 96 terms; the trade-off is that the edge rail is a fine-motor target, so the 48 px jump sheet has to stay the accessible path.
• Suppresses shared mockup chrome for this route in src/app/mockups/mockups-layout-client.tsx, because every frame draws its own top bar, mode nav and composer — shared chrome would read as a second real header over the study.
• Documents the study in mockups/README.md and regenerates docs/site-map.md.

No production route, component, or behaviour changes: the study is design scratch under src/app/mockups/**, which 404s in production.

Verification

• npm run verify:pr-local

Full run completed check:runtime, check:installed-lock-parity, format:changed, sitemap:check, docs:check-index, docs:check-inventory, docs:check-scripts, docs:check-links, check:branch-review-ledger, check:outstanding-issues, check:ledger-write-discipline, lint, typecheck, test — Test Files 673 passed (673), Tests 7276 passed | 4 skipped (7280).

build was refused on that first pass with BUILD_REFUSED_DEV_SERVER exit=76 because the dev server used for browser proof was still running. The dev server was stopped, .next removed, and the remaining gates re-run to completion:

• npm run build → ✓ Compiled successfully in 55s, Client bundle secret surface check passed.
• npm run check:bundle-budget (against a fresh .next) → production (what users download, 110 routes): 1533.5 KiB gzip — baseline 1482.5 KiB, within tolerance. and mockups (design scratch, 404s in production, 87 routes, 102 exclusive chunks): 376.9 KiB gzip — baseline 370.2 KiB, within tolerance.
• npm run check:rag:fixtures → Offline RAG fixture and manifest validation passed (36 golden cases, 26 suites).
• npm run check:medication-interactions → data/medication-interaction-index.json is up to date (525 rows).
• npm run check:medication-lexicon-report → docs/medication-interaction-lexicon-review.md is up to date (37 catalogue terms).

UI verification not run as npm run verify:ui: the change adds a design-scratch mockup route and touches no production journey, so the Chromium journey gate covers no changed failure path. Browser proof was taken directly instead — the route was rendered in Chromium at 1440 px in both prefers-color-scheme: dark and light, and each direction plus the direction 03 jump-sheet open state was screenshotted and reviewed. Two defects were found and fixed that way: the jump sheet was stretching over the scroll container's content height instead of overlaying the device frame, and the Filters count badge was rendering mid-label because the negative-offset utilities it relied on were not emitted.

Risk and rollout

• Risk: none to production. src/app/mockups/** returns 404 in production and is excluded from the wiring and reachability gates; the only shared file touched is the mockups layout client, and the edit is additive (one route added to the existing chrome-suppression lists).
• Rollback: revert the commit; nothing else depends on the new route.
• Provider or production effects: None.

Notes

• "Remove the A–Z" was ambiguous between the orphaned A–Z / Z–A sort pill and the A–Z / Abbreviations view switch, so the study resolves both readings rather than guessing: every direction drops the sort pill, and direction 02 additionally removes the view switch by folding it into the letter rail.
• The mockups use min-h-11 / h-11 tap targets, matching the existing design-scratch convention; production's min-h-12 contract is untouched.

---

Generated by Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[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]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your current included review allowance is based on your included PR review attempts over the past 7 days.

Next review available in:49 minutes

Limit details: You’ve used the included review currently available. Your 102 included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b3aa2015-7e52-4cee-9c79-6bfa1c5598fd

📥 Commits

Reviewing files that changed from the base of the PR and between 4a68e5d and 6bd0934.

📒 Files selected for processing (15)

• docs/branch-review-records/2149be40c9723dfdcf39c3831bee991df0e35a86a2f2426a566763d4c7df1916.record.md
• docs/branch-review-records/599419ed3f41f0407ee7e9c44816a1c23691e853437cb963c33d0dcd860f4099.record.md
• docs/branch-review-records/5f15d81f006cc85637c12e37a6c1fc41c800de4a1f9f93e6f6d66745a57a5636.record.md
• docs/design-system/COMPONENTS.md
• docs/design-system/adoption-manifest.json
• docs/site-map.md
• mockups/README.md
• src/app/mockups/dictionary-browse-header-compact/page.tsx
• src/app/mockups/dictionary-browse-header/page.tsx
• src/app/mockups/mockups-layout-client.tsx
• src/components/dictionary-browse-header-compact-mockups.tsx
• src/components/dictionary-browse-header-mockups.tsx
• src/components/dictionary/dictionary-catalogue-pages.tsx
• src/lib/dictionary.ts
• tests/dictionary-data.test.ts

---

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