Fix therapy home grey block and colour mismatch

[BigSimmo]

Summary

• The Therapy Compass workspace wraps every /therapy-compass/* route in .tc-root, which paints a grey --surface-chrome background (#f7f8fa) over the shell's white --background (#ffffff).
• That chrome is correct for the interior, nav-bearing routes (search, recommend, pathways…), but the home route renders ModeHomeMain — a full-height white --background canvas identical to every other mode home.
• On phones ModeHomeMain is only content-height (min-h-0), so below the fold the grey .tc-root chrome showed through as a large mismatched block, and the whole home read as a different colour from the other home pages.
• Fix: tag the workspace wrapper with tc-root--home on the home route and override its background to --background, so the therapy home is a seamless white canvas like the other mode homes. Interior routes are untouched and keep the grey chrome.

Files changed:

• src/components/therapy-compass/workspace.tsx — add tc-root--home to the wrapper on the home route only.
• src/components/therapy-compass/therapy-compass.css — scoped .tc-root.tc-root--home { background: var(--background); } with an explanatory comment.

Verification

• npm run typecheck — passes
• npm run lint — passes
• Targeted Playwright check at a 390×844 phone viewport: therapy home .tc-root now computes rgb(255,255,255), matching ModeHomeMain; interior routes (/pathways, /recommend) still compute rgb(247,248,250) (grey chrome preserved). Before/after screenshots confirm the grey bottom block is gone.
• UI verification not run: npm run verify:ui — the environment's pre-installed Chromium (build 1194) does not match the version Playwright 1.61.1 pins, and playwright install is disallowed here; targeted browser checks were run against the pre-installed executable instead.

Risk and rollout

• Risk: Very low. Presentational-only change (one CSS rule scoped to a new home-only modifier class, plus a conditional className). No behaviour, data, or logic changes.
• Rollback: Revert the two-file diff.
• Provider or production effects: None.

Clinical Governance Preflight

N/A — this change does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output. It is a home-page background colour fix.

Notes

• The dead .tc-root .tc-workspace-006 descendant rule (identical to the base .tc-root rule but never matching, since the element is not nested under another .tc-root) was left as-is to keep this change minimal.

🤖 Generated with Claude Code

https://claude.ai/code/session_0114JmM94CoBSn19qU3Crv4F

---

Generated by Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Improved the Therapy Compass home page layout by ensuring it uses the intended full-height background.
  • Prevented surrounding interface styling from bleeding into the home page on smaller screen layouts.

[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: 65a1f8fd-b364-4a25-a324-076671947ab5

📥 Commits

Reviewing files that changed from the base of the PR and between 51e747e and 1b191cf.

📒 Files selected for processing (2)

• src/components/therapy-compass/therapy-compass.css
• src/components/therapy-compass/workspace.tsx

---

📝 Walkthrough

Walkthrough

The Therapy Compass workspace now marks the /therapy-compass home route with a dedicated root class and applies the --background color to that route.

Changes

Therapy Compass home route

Layer / File(s)	Summary
Home root class and background src/components/therapy-compass/workspace.tsx, src/components/therapy-compass/therapy-compass.css	TherapyCompassWorkspace conditionally adds tc-root--home, and the matching CSS rule sets the home route background to var(--background).

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

Possibly related PRs

• BigSimmo/Database#825: Updates TherapyCompassWorkspace root behavior for the /therapy-compass route.
• BigSimmo/Database#875: Adjusts route-aware Therapy Compass workspace behavior.
• BigSimmo/Database#887: Adds home-route-specific Therapy Compass workspace behavior.

Suggested labels:codex

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing the Therapy Compass home page background mismatch and grey block issue.
Description check	✅ Passed	The description follows the template with Summary, Verification, Risk and rollout, Clinical Governance Preflight, and Notes sections.
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/therapy-home-styling-bug-b4wgd8

---

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

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.