style(answer): shrink and refine the Sources capsule

[BigSimmo]

Summary

• Makes the answer "Sources" capsule more aesthetic and visibly smaller. The visible pill now renders at ~26px tall (was 44px), with a 12px icon/chevron, tighter padding, an 11px label, and a slimmer count badge.
• Keeps the WCAG 2.5.5 touch target: the button is split into an invisible 44px hit area (sourceCapsuleHit) wrapping a compact visible pill (sourceCapsule → .source-capsule-face). The expectMinTouchTarget UI-smoke assertions still measure a 44px button box; only the visible chrome shrank.
• Hover (accent border + subtle lift), expanded (accent border + rotated chevron), and focus-visible chrome now key off the hit target's :hover / [aria-expanded] / :focus-visible in globals.css (@layer components), with the reduced-motion guard updated to match. Border colour is owned in the component layer so the states win without !important.
• No change to which sources are shown, their metadata, ordering, or any source/answer behaviour — purely presentational chrome for the disclosure button.

Files: src/components/ui-primitives.tsx, src/components/clinical-dashboard/answer-content.tsx, src/app/globals.css, docs/redesign/09-ui-primitives-recipes.md.

Verification

• npm run verify:pr-local
• npm run verify:ui when UI, routing, styling, browser behavior, reduced-motion, or forced-colors behavior changed
• npm run verify:release before release or handoff confidence claims

The packaged verify:ui / verify:pr-local gates could not run in this environment: the pinned Playwright browser build isn't installed (npx playwright install is disallowed here) and several unrelated specs fail to load a missing @axe-core/playwright dev dep. Instead I verified directly against a live npm run ensure dev server (demo mode) using the pre-installed Chromium, driving the real component:

• Touch target preserved: hit button box measured 44.0 × 122.3px; visible face 26.5 × 122.3px — expectMinTouchTarget passes (≥42 both axes), light and dark.
• Rendered and interaction-checked in light + dark: rest, hover (accent border + lift), and expanded (accent border, rotated chevron, popover open) all correct.
• npm run typecheck — clean for source files (only pre-existing test-dep errors remain); eslint clean on the changed source files; Prettier applied.

Clinical Governance Preflight

Change is presentational only (sizing/style of the Sources disclosure button); it does not alter ingestion, retrieval, answer generation, source data, metadata, or governance behaviour. The properties below remain unaffected:

• 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 (n/a — no decision-support behaviour changed)

Notes

• The 44px hit area is intentionally larger than the visible pill; the extra height is transparent padding above/below the pill (the accessible pattern), so the control looks small but stays easy to tap.

🤖 Generated with Claude Code

---

Generated by Claude Code

Summary by CodeRabbit

• Accessibility

  • Improved the Sources control’s touch target to meet WCAG sizing guidance while keeping the visible capsule compact.
  • Updated hover, focus, expanded, and reduced-motion behavior for clearer interaction states.

• UI Improvements

  • Refined source capsule and count badge styling, including icon sizing and badge dimensions.

• Documentation

  • Updated UI primitive recipes to explain the new source capsule and touch-target composition.

[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: 718f63ad-0889-45c0-ab70-358825a33098

📥 Commits

Reviewing files that changed from the base of the PR and between 43a8a3e and d7f7c4f.

📒 Files selected for processing (4)

• docs/redesign/09-ui-primitives-recipes.md
• src/app/globals.css
• src/components/clinical-dashboard/answer-content.tsx
• src/components/ui-primitives.tsx

---

📝 Walkthrough

Walkthrough

The Sources capsule now separates its 44px interactive hit target from the compact visible face. State styling, badge sizing, answer-content composition, reduced-motion behavior, and UI primitive documentation are updated accordingly.

Changes

Source capsule hit-target refactor

Layer / File(s)	Summary
Capsule contract and composition src/components/ui-primitives.tsx, src/components/clinical-dashboard/answer-content.tsx, docs/redesign/09-ui-primitives-recipes.md	Adds sourceCapsuleHit, simplifies sourceCapsule to the visible face, adjusts badge sizing, wraps the answer sources content in the hit target, and documents the new composition.
Capsule state styling src/app/globals.css	Moves hover, expanded, focus-visible, and reduced-motion selectors to the hit-target and face structure.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

• BigSimmo/Database#487: Both changes update the Sources capsule implementation and its answer-content usage, including capsule and badge sizing.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: shrinking and refining the Sources capsule styling.
Description check	✅ Passed	The description follows the template with Summary, Verification, Clinical Governance Preflight, and Notes, and is detailed enough.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 claude/source-button-styling-iyba2y

---

_{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 ↗︎.