style: token the Dictionary catalogue's repeated max-w-[76rem]

[BigSimmo]

Summary

• Adds a --content-width-catalogue: 76rem token to src/app/globals.css.
• Replaces all 7 occurrences of the arbitrary max-w-[76rem] Tailwind value with max-w-[var(--content-width-catalogue)] across dictionary-catalogue-pages.tsx, dictionary-sources-page.tsx, and diagnosis-map-panel.tsx.

Follow-up from a CodeRabbit review comment on PR #2341, which pointed out the arbitrary value was repeated in one file but is actually a repo-wide pattern spanning 3 files — so it's tokenized here rather than fixed in isolation, per the review reply on that PR.

Verification

• npm run check:design-system-contract — passed (990 files; arbitrary tracking 0; no ratchet regressions).
• Targeted tests: tests/search-route-ownership.test.ts, tests/diagnosis-map-panel.dom.test.tsx, tests/mode-nav-addon-slot.dom.test.tsx — 3 files, 36 tests passed.
• npx prettier --check clean on all changed files.
• npx eslint clean on all changed .tsx files.
• Verification not run: npm run verify:pr-local — pure visual/no-behaviour-change styling swap, no layout or logic touched.

Risk and rollout

• Risk: none — same computed max-width (76rem) before and after, just resolved from a token instead of a literal. No visual change.
• Rollback: revert this commit.
• Provider or production effects: None
• RAG impact: none

Clinical Governance Preflight

Not applicable — pure design-token/CSS refactor, no clinical, ingestion, answer-generation, or source-governance surface touched.

---

Generated by Claude Code

---

Note

Low Risk
CSS token swap only—same max-width before and after, no logic or data paths touched.

Overview
Introduces --content-width-catalogue: 76rem in globals.css alongside the other layout constraint tokens, so the dictionary catalogue’s shared content column width has one source of truth.

Replaces every max-w-[76rem] with max-w-[var(--content-width-catalogue)] on dictionary catalogue, topics, topic detail, and sources shells, plus the diagnosis map sheet’s large breakpoint cap. Computed width stays 76rem; this is a maintainability / design-contract cleanup (follow-up to repeated arbitrary-width review), not a layout change.

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

Summary by CodeRabbit

• Style
  • Standardized the maximum content width across dictionary catalogues, topics, topic details, sources, and diagnosis map views.
  • Improved layout consistency by using a shared responsive width setting across these pages and panels.

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

[cursor]

Approved. Cursor Bugbot was not present after the first check poll, so that signal was skipped; no applicable approval policy requires human review, and there are no existing review findings. No reviewers were assigned.

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[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

Run ID: 3ad10691-729c-4a2d-8d5c-329f633a0d50

📥 Commits

Reviewing files that changed from the base of the PR and between 93891f0 and 94bb968.

📒 Files selected for processing (4)

• src/app/globals.css
• src/components/dictionary/dictionary-catalogue-pages.tsx
• src/components/dictionary/dictionary-sources-page.tsx
• src/components/differentials/diagnosis-map-panel.tsx

Included review availability: 0 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

---

📝 Walkthrough

Walkthrough

The change adds a shared --content-width-catalogue token set to 76rem and replaces repeated fixed catalogue width values across dictionary and diagnosis map layouts.

Changes

Catalogue content width

Layer / File(s)	Summary
Define catalogue width token src/app/globals.css	Adds --content-width-catalogue: 76rem to the root styles.
Apply catalogue width token src/components/dictionary/dictionary-catalogue-pages.tsx, src/components/dictionary/dictionary-sources-page.tsx, src/components/differentials/diagnosis-map-panel.tsx	Updates catalogue, topics, topic-detail, sources, and diagnosis map containers to use the shared token.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk:⚪ Minimal · up to 94bb9

This change centralizes an existing 76rem width value without changing computed layout or application behavior. It is merge-ready after normal checks, with no actionable merge-blocking risk remaining.

Suggested reviewers:claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: replacing repeated catalogue width literals with a shared design token.
Description check	✅ Passed	The description includes the required summary, verification, risk, rollback, impact, and governance sections with relevant details.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
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/dictionary-catalogue-width-token

---

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