refactor(forms): share FormCodeBadge and fix code overflow on the detail page

[BigSimmo]

Summary

Follow-up to the merged results-badge fix (#728): the same overflow existed on the form detail page, where the large hero badge rendered the raw code (6B Attachment) at text-4xl in a fixed square and clipped/wrapped it.

• Extracts the split-code badge into a shared src/components/forms/form-code-badge.tsx module (FormCodeBadge + splitFormCode), so the head/qualifier split, sizing, and accessibility handling live in one place.
• Adds a responsive hero variant (h-14 → sm:h-24) for the large detail-page badge, scaling the head across breakpoints.
• Replaces the detail-page hero badge with <FormCodeBadge variant="hero" />, and the inline code in the decision-context Current card with <FormCodeBadge variant="sm" />, so the code + qualifier read as one contained chip instead of large wrapping text.
• forms-search-results-page.tsx now imports the shared badge instead of its local copy — visual output there is unchanged.

Scope note: presentational only. It is classified clinical-risk purely because forms-search-results-page.tsx contains "search" in its name; the Clinical Governance Preflight below is completed on that basis and every listed invariant is genuinely untouched. No data, routing, retrieval, answer, ingestion, or governance behaviour changed. The accessible full-code string (sr-only) is preserved for both badges, so screen readers and text queries still see the complete code.

Verification

• npx eslint on the three changed files — clean
• npx prettier --check on the three changed files — clean
• node scripts/check-type-scale.mjs --strict — passes (no arbitrary font sizes)
• npx vitest run tests/forms.test.ts tests/forms-clipboard-fallback.test.ts — 6/6 pass
• npm run typecheck — no new errors in the changed files (pre-existing failures are all missing @testing-library/@axe-core/playwright dev deps in tests/, identical on the base branch)
• Browser QA via Playwright screenshots on the running dev server: /forms/form-6b-attachment (attachment code) at desktop + mobile shows 6B / ATTACHMENT fully contained in the hero and decision-context badges; /forms/form-10a (3-char code) and normal codes render with no regression
• UI verification not run: the npm run verify:ui gate requires @axe-core/playwright, which is not installed in this environment; verified visually with the pre-installed Chromium via playwright-core instead.

Risk and rollout

• Risk: low — presentational refactor across three forms components; extracts an existing component and swaps two render sites to it, no behavioural/data/API surface touched.
• Rollback: revert the single commit on this branch; the shared module is self-contained with no migrations or state.
• Provider or production effects: None / not applicable.

Clinical Governance Preflight

• 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

Notes

• The qualifier reads in full on the desktop hero and the sm badge; on the narrow mobile hero (56px) it truncates with an ellipsis and carries a title tooltip with the full text.

🤖 Generated with Claude Code

---

Generated by Claude Code

[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

@BigSimmo, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 3 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

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 for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d48caa5-070d-42da-9943-fc8836fd4f92

📥 Commits

Reviewing files that changed from the base of the PR and between a6ac8c0 and 37b22b7.

📒 Files selected for processing (3)

• src/components/forms/form-code-badge.tsx
• src/components/forms/form-detail-page.tsx
• src/components/forms/forms-search-results-page.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/form-sizing-design-8hebku

---

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