fix(forms): contain long form codes in result badge and elevate design

[BigSimmo]

Summary

• Fixes the badge sizing bug. Form codes carrying a trailing qualifier — e.g. 6B Attachment / 1A attachment — overflowed the fixed-size result badge because the whole string rendered at text-2xl, spilling the qualifier word out of the chip and over the title column (the reported screenshot).
• Introduces a FormCodeBadge that splits the code into a prominent head (6B) and a compact, fully-contained qualifier sub-label (ATTACHMENT), and scales the head font down as the code lengthens (1A → text-2xl, 10A → text-xl, longer → text-base) so no code ever clips. Applied consistently to the desktop results table and the mobile cards.
• Design elevation: the badge is now a gradient, inset-shadowed chip; result rows gain a subtle accent rail plus colour transition on hover; the Open control gains a hover affordance (border/fill on row hover, chevron nudge).
• The qualifier sub-label uses the named text-4xs type-scale step (not an arbitrary size), keeping it on the design scale.

Scope note: this is a purely presentational change to one component. It is classified clinical-risk only because the filename forms-search-results-page.tsx contains "search"; the Clinical Governance Preflight below is completed on that basis, and every listed invariant is genuinely untouched by the diff. No data, routing, retrieval, answer, ingestion, or governance behaviour changed, and test ids / rendered text are unchanged so existing specs keep passing.

Verification

• npx eslint src/components/forms/forms-search-results-page.tsx — clean
• npx prettier --check on the file — clean
• node scripts/check-type-scale.mjs --strict — passes (no arbitrary font sizes)
• npx vitest run tests/forms.test.ts — 5/5 pass
• npm run typecheck — no new errors from this change (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 against the running dev server at desktop (1360px) and mobile (420px) on the attachment query, which surfaces the 1A/6B/12C Attachment forms — badge is fully contained at both breakpoints
• 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 — isolated presentational change to a single component (forms-search-results-page.tsx); no behavioural, data, or API surface touched.
• Rollback: revert the two commits on this branch; no migrations or state changes involved.
• 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 desktop (ATTACHMENT); on the narrower mobile chip it truncates with an ellipsis and carries a title tooltip with the full text.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Improved form code display across desktop results and mobile cards with a unified badge layout.
  • Code headings now scale by badge size and code length for clearer readability.
  • Optional qualifiers are shown as uppercase sub-labels, with truncation to avoid overflow.
  • Updated desktop/mobile grid spacing by adjusting the first column width for tighter alignment.
  • Enhanced the “Open” link icon with a subtle hover animation for a more responsive feel.

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

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 344e4b0e-cc52-449b-a09f-6f057942918c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

❌ Error creating Unit Test PR.

• 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.}

[coderabbitai]

Note

Unit test generation is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

---

Generating unit tests... This may take up to 20 minutes.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/forms/forms-search-results-page.tsx`:
- Around line 107-118: Update the code rendering around the head and qualifier
spans so accessibility text exposes one complete code value in the intended
order, rather than concatenating adjacent fragments without separation. Preserve
the visual head/qualifier styling, mark those visual fragments as hidden from
the accessibility tree, and add a single accessible text node for the full code
so whole-code text queries continue to work.

🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 68a61ddd-be1d-4ae7-8c9f-1c9bed5689e6

📥 Commits

Reviewing files that changed from the base of the PR and between a185a59 and 8883289.

📒 Files selected for processing (1)

• src/components/forms/forms-search-results-page.tsx

[coderabbitai]

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Autofix skipped. No unresolved CodeRabbit review comments with fix instructions found.

[coderabbitai]

Request timed out after 900000ms (requestId=3291ab96-2396-4b60-adc8-30cfb087da60)