mockups: let the prototype sheet reach every mockup component, and fix what that exposed

[BigSimmo]

Summary

Two changes, the second caused by the first. #2642 was merged into this branch on 2026-09-05, so this PR now carries both.

1. The scan fix

#2606 fixed the Caring Contacts share of a repository-wide defect and deliberately left the rest. This is the rest. 553 arbitrary utilities across the mockup tree produced no CSS rule at all — the class landed on the element, nothing rendered from it, and nothing failed.

The fix needs both kinds of @source entry, which is measured rather than reasoned. Counting inert utilities across every mockup component in the repository:

re-include shape	inert utilities
directory entries alone	475
file globs alone	125
both together	0

They reach different files. A directory entry finds a tree whose files are named plainly — caring-contacts/mockups/product-pages.tsx is not itself named for a mockup, so no file-shape glob matches it. A file glob finds the mockups that live loose in src/components with no directory to name; 34 of them do, and they were the largest single block of the 553. Neither list is decorative, so please do not prune one because the other looks like it covers the same ground.

136 of 242 captured screens change. I captured all 121 static mockup routes at 390px and 1440px, before and after, and compared them pixel by pixel, then ran a geometry probe over both builds so new faults could be told from pre-existing ones. Many pages get dramatically shorter as constraints finally apply: /mockups/privacy-page-directions goes from 14,197px to 3,582px tall at desktop. Nothing broke outright — 0 routes newly overflow horizontally, 0 new page errors, 0 routes stopped loading.

2. What the scan fix exposed, now fixed

The classes finally applying revealed two real defects. Both are remediated per case rather than swept.

Interactive controls below the 48px tap floor. The first count of "52 phone controls" was wrong, and correcting it changed the work: most of these study pages draw a desktop frame and a 390px phone frame side by side on one canvas, so a control measured at a 390px viewport is very often the one inside the desktop drawing, which is correct as it is. The tell is that the undersized count is identical at 390px and 1440px on five of the ten routes. So a control is raised only when it is genuinely a phone control — min-h-tap outright inside a phone frame or a compact branch (a viewport sm: variant would resolve against the page rather than the frame, as services-filter-refined-mockups.tsx notes in its own header), and min-h-tap with an sm: variant restoring the desktop height for study-page chrome that does track the viewport.

route	undersized before	after
privacy-live-signal-perfected	10	0
privacy-page-directions	10	0
tools-split-pane	6	1
tools-command-center	7	1
search-heading	9	7
services-filter-refined	94	92

The residue is intentional: bare <select> and <input> elements measured at 21–38px inside the padded wrapper that is the actual hit area — the same construction as src/components/ui/text-field.tsx — plus the facet chips in the desktop frames.

Four routes with text crushed and clipped. They drew a desktop or tablet layout inside a frame free to reflow. At 390px the frame collapsed to the page width, its fixed sidebar took nearly all of it, and the content column was left with 2px. "Brief intervention · 5 minutes" rendered into a 2px box; on privacy-page-directions even the page's own <h1> was clipped, along with seventeen other strings. A drawing of a wide layout should not reflow — it keeps its proportions and scrolls sideways, as this repository already does for wide tables and diagrams.

route	clipped strings before	after
therapy-navigation-context	4	0
therapy-navigation-dock	3	0
therapy-navigation-rail	3	0
privacy-page-directions	18	0

No route gained page-level horizontal overflow, and the desktop rendering of all four is unchanged in geometry.

Left alone on purpose

A taller class is the wrong fix for these, and forcing it would damage the mockup:

• dictionary-browse-header renders a 26-letter A–Z index at 15px per letter. A 48px floor there needs a different component.
• filter-sheet-restyle-mockups.tsx and document-navigation-contract-mockups.tsx are density comparisons — 36-versus-48 is the subject of the study.
• source-overlay-redesign-mockups.tsx draws one shared MockButton into both the desktop and the phone frame with no flag to tell them apart.
• phone-inpage-navigation lives in src/app/mockups/, where 69 utilities across four route files are still inert. globals.css excludes that directory with a bare-directory @source not, and seven @source spellings failed to re-include it. A separate defect, not addressed here.

Verification

• npm run verify:pr-local on the merged branch — failed: (none), not reached: (none), all 39 stages completed, including the full offline unit suite, lint, typecheck and build.
• tests/mockup-utility-emission.test.ts — 4 passed. It compiles the real stylesheet and fails if any mockup utility stops being emitted, which makes the 553 → 0 a standing check rather than a note about one afternoon.
• Inert-utility count measured against the compiled sheet: 553 before, 0 after, across all ten mockup areas.
• Full-route sweep at 390px and 1440px on real production builds, before and after: 242 screenshots each side, pixel-compared.
• Geometry probe over all 121 routes at both widths, both builds, diffed to isolate new faults from pre-existing ones. Every number in this description comes from it.
• npm run format — clean, and committed.

UI verification not run: the full verify:ui suite is deferred to CI, which runs it on this PR. The route sweep above is broader than that suite for this change, since it covers every mockup route rather than the specs.

An earlier gate run reported three failed test files, and it is worth recording how that was ruled out rather than waved away as a flake. tests/clinical-hazard-controls.test.ts, tests/privacy-readiness-contract.test.ts and tests/rag-plan-package-parity.test.ts each named its own cause — reviewedCommit does not exist 883f1007a85cd4e02198f39c12c4a4e467d4b89e and manifest reconciledBase is unavailable locally: f3d1a3cce2c943ad3083425ed9c7c46dbef23087 — commits the agent container's shallow clone did not carry. After git fetch --unshallow, git cat-file -t resolved both to commit and the three passed: Test Files 3 passed (3), Tests 29 passed (29). No test was skipped, disabled, quarantined or re-run to get green. Same artefact #2559 documented on 2026-09-02, tracked as #TK9GH7 / #1M0J6D.

Risk and rollout

• Risk: confined to developer-only pages. No production route loads this stylesheet or these components; /mockups 404s in production, and globals.css keeps its exclusion, so the production bundle is unchanged. The mockup-only sheet grows from 269.8 KB to 341.2 KB uncompressed.
• Rollback: revert the commits on this branch. Nothing is stateful; no schema, migration, lockfile or generated artefact is involved.
• Provider or production effects: None. No OpenAI, no Supabase, no hosted CI, no release gate. Nothing touches supabase/migrations/**.
• RAG impact: no retrieval behaviour change — no file under src/lib/rag/, no retrieval RPC, no ranking configuration, no golden fixture and no ranking test is modified. The diff is one mockup-only stylesheet and seven mockup components.

Clinical Governance Preflight

This section is required because the diff touches two files named for privacy — privacy-page-directions-mockups.tsx and privacy-live-signal-perfected-mockups.tsx. Both are developer-only prototype canvases under /mockups, which 404s in production. What changes in them is a CSS class on a button and a width floor on a drawing of a desktop layout.

• Source-backed claims still require linked source verification before clinical use
• No patient-identifiable document workflow was introduced or expanded without explicit governance approval
• Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
• Service-role keys and private document access remain server-only
• Demo/synthetic content remains clearly separated from real clinical sources
• Source metadata, review status, and outdated/unknown-source behavior remain conservative
• Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed

Each box was checked against the diff rather than assumed. No answer, citation or source-rendering code is touched; no ingestion, upload or document workflow is added or widened; no environment value or Supabase configuration is modified and nothing here reads or writes any live service; no access-control, auth or key-handling code is touched; the mockups use their existing fixtures and no real clinical source is introduced; no metadata, governance or review-status code is touched; and no clinical decision-support behaviour changed, so the deployment classification is unaffected. The privacy prose those two mockups display is unchanged, and the production privacy page is governed by tests/privacy-ui.test.ts, which this diff does not touch.

Notes

The deeper question from #2606 is still open and is now better evidenced: the development and production builds disagree about which files Tailwind scans, so a local look at a mockup route cannot be trusted to show what production renders. This change removes the consequence for mockups; it does not explain the divergence.

🤖 Generated with Claude Code

https://claude.ai/code/session_01CVCJgsbjoX5xqTSsj6siBc

---

Note

Low Risk
Changes are limited to developer mockup routes and a mockup-only stylesheet; production bundles and clinical paths are not affected.

Overview
Expands the mockup-only Tailwind sheet so utilities defined in prototype components actually emit CSS again. mockups.css now pairs file-shape @source globs (loose *-mockup(s).tsx files under components) with directory @source entries for every mockup area—not only Caring Contacts—because each shape alone left hundreds of classes inert. Comments document the measured 553 → 0 inert count and point at tests/mockup-utility-emission.test.ts as the guardrail. Production globals.css exclusions are unchanged.

Follow-up fixes in seven mockup components once those classes applied: phone and compact controls move to min-h-tap / h-tap (with sm: where study-page chrome should stay shorter on wide viewports), and desktop/tablet device frames get min-w-* plus horizontal scroll so wide layout drawings stop collapsing and clipping labels on a 390px review page.

^{Reviewed by Cursor Bugbot for commit 9717342. Configure here.}

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 8d73c6b7-1d37-46c2-86b7-963dff5797a0

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[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 ↗︎.

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

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_75c8e5b7-bff8-4ffc-adb8-c2c3da2b1d22)

[github-actions]

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

• Production UI (1) — not baselined: this job did NOT run on the main comparison below (path-scoped skip), so that run says nothing about it either way. Treat the comparison as absent, not green, and inspect the failing step.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #15708 (cancelled). That run's conclusion is an aggregate and did not exercise Production UI (1).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_8a3473b7-9be4-44f1-893f-5582da12de6b)

[BigSimmo]

Production UI (3) is not this PR's failure

PR required is red only because it aggregates the same job, so this covers both.

The failure

tests/ui-tools.spec.ts:3103 › PsychSift service detail page
  › service actions keep a distinct verification source beside the contact route

Error: locator.click: strict mode violation:
  getByTestId('service-actions-trigger') resolved to 2 elements:
    1) …aka getByTestId('header-collapse-addon').getByTestId('service-actions-trigger')
    2) …aka locator('div').filter({ hasText: 'ServicesAdult Home Treatment Team…' })

Two copies of the same trigger are in the DOM on /services/adult-home-treatment-team, so the click is ambiguous.

Why it cannot be this change

1. The whole diff is one file. git diff --stat origin/main...HEAD is src/app/mockups/mockups.css | 45 +++--, +35/−10. Nothing else.
2. That stylesheet is loaded only by /mockups/* routes. The failing test visits /services/adult-home-treatment-team, a production route, which does not load it.
3. A stylesheet cannot put a second <button> in the DOM. The failure is a duplicated element, not a layout or visibility difference.
4. It passes with this change applied. Running the whole of shard 3 locally on this branch — the same 17 spec files, --project=chromium --grep-invert "@quarantine|@mockup" — that test passes:

✓  201 [chromium] › tests/ui-tools.spec.ts:3103:7 › PsychSift service detail page
      › service actions keep a distinct verification source beside the contact route (764ms)

The local run was 205 passed, 1 failed, and the one failure was ui-pwa.spec.ts:143 reporting "in-incognito" — a sandbox artefact of how the browser context is created here, not reproducible in CI and unrelated to either the CSS or the duplicated trigger.

I also ran the full mockup project, which is the suite this change can actually affect: 142 passed.

What I am doing about it

The duplicate comes from the phone header collapse portal mounting a second copy of the header addon, so service-actions-trigger exists both in the portal and in the page. Whether both are mounted depends on viewport and scroll state, which is why it reproduces in the CI shard and not in a local run of the same files. That is a real defect in either the component or the test's locator, but it belongs to the code on main, not to a mockup stylesheet, and fixing it here would widen this PR into production component territory for no reason connected to the change.

No fix for it exists that I could port. Re-running the failed job once, per the flake protocol — if it fails again the second failure is real, and it still is not this PR's.

---

Generated by Claude Code

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_09e19c6d-7a28-4b91-9f5e-05ce22eb2026)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_dcfbe1db-210e-4643-a7c4-199b65e463d6)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_8f27b4f8-9a19-426c-9251-b2578c57b844)