Redesign related documents panel for a compact, refined mobile view

[BigSimmo]

Summary

• Redesigned the Related documents panel (RelatedDocumentsPanel, shown under a high-trust answer) to be compact, sophisticated, and streamlined on phones, aligned with the app's document-result design language.
• Each card now leads with a compact file-kind tile and an uppercase match-reason eyebrow, uses icon-led evidence pills (p.12 +2, 2 images, 1 table) instead of a dot-separated text line, and turns Scope into a 44px icon-only button on phones that expands to an icon+label control from sm: up (explicit aria-label preserved).
• Capped the tag cloud at 3 compact chips and tightened card padding and grid gaps; the two-column layout is kept from md: up.
• Removed the duplicated site / document-type chips from the tag cloud (they are already shown by the governance badges), so cards read cleaner and shorter without losing any governance signal.
• Affected area: src/components/clinical-dashboard/document-results.tsx only. Behaviour is otherwise unchanged — the panel still renders only for a non-empty related-document set, links target the same page/chunk, and the scope / tag-search callbacks are untouched.

Verification

• Verification not run: this ephemeral session does not run the full npm run verify:pr-local gate. Instead ran eslint on the changed file (clean, --max-warnings 0) and tsc --noEmit (zero src/ errors — the only failures are the pre-existing tests/*.dom.test.tsx missing-@testing-library/react env issue, unrelated to this change).
• UI verification not run: the pinned Playwright browser build used by npm run verify:ui is not present in this container. Instead drove a targeted Playwright pass against the running dev server at 390×844 (phone) and 1280×900 (desktop), confirming the redesigned and streamlined panel renders correctly in the mobile bottom sheet and the desktop two-column grid with no page overflow.

Risk and rollout

• Risk: Low — presentational-only changes to one client component; the empty-state and all interaction callbacks are unchanged, and the governance badges still render.
• Rollback: Revert the two commits on this branch (single file, document-results.tsx).
• Provider or production effects: None.

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

This is a layout / styling change to how related documents are presented. It does not alter ingestion, retrieval, ranking, answer generation, document access, or any Supabase / provider behaviour, and the DocumentOrganizationBadges governance signals (site, document type, needs-review / ambiguous-site) still render on every card.

Notes

• Verified with a throwaway Playwright script that was removed before each commit; the working tree contains only the single component change.

Summary by CodeRabbit

• UI Improvements
  • Redesigned the “Related documents” drawer with clearer document cards.
  • Added concise metadata indicators for pages, images, and tables.
  • Improved document links to open at the relevant page and section.
  • Added formatted page references and styled match-reason titles.
  • Limited displayed tags and removed less relevant label types.
  • Display summaries when available.

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

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: 00927c7c-3fe4-4007-9acd-3a88f57f3e97

📥 Commits

Reviewing files that changed from the base of the PR and between 6630050 and f918427.

📒 Files selected for processing (1)

• src/components/clinical-dashboard/document-results.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/clinical-dashboard/document-results.tsx

---

📝 Walkthrough

Walkthrough

The related-documents drawer now renders each result through a dedicated card component with page-aware links, metadata badges, optional summaries, and filtered tags. Panel rendering also wires scope and tag-search callbacks and updates grid spacing.

Changes

Related document UI

Layer / File(s)	Summary
Related document card rendering src/components/clinical-dashboard/document-results.tsx	Adds compact page labels, page/chunk-aware document links, iconized metadata badges, conditional summaries, and a three-label tag cloud. The panel uses the new card component, passes callbacks, and adjusts grid layout classes.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• BigSimmo/Database#492: Updates DocumentTagCloud chip and tone styling used by the related-document tag rendering path.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: a compact mobile redesign of the related documents panel.
Description check	✅ Passed	The description follows the template well, covering summary, verification, risk/rollback, governance, and notes.
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/show-related-content-mobile-wzu9po

---

_{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]

Agent execution returned an error. Exit code: 1