fix(mobile): restore search composer on phone-width mode-home pages

[BigSimmo]

Problem

On mode-home pages (Answer and the other mode landing screens) the search composer disappeared entirely at phone widths — the hero sat at the top of an otherwise empty screen.

Cause

The hero-composer media query was raised to (min-width: 640px), but the inline composer fallback was suppressed whenever a desktop-home slot id was present. Below 640px the portal never mounted and the fallback was disabled, so no composer rendered anywhere on the page.

Fix

Track the hero media-query match (desktopHomeComposerMediaMatches) independently of portal mount state, and render the inline composer whenever the hero composer is neither active nor pending. This keeps the author's 640px hero-placement intent on tablet/desktop while guaranteeing the composer is always present at some width — it can no longer silently vanish.

Verification

• npm run typecheck — clean (exit 0)
• npm run test:e2e:chromium (real Chromium) — the dashboard loads without page overflow tests at 320 / 375 / 414px (all < 640px, the dead zone) and anonymous mobile user can search at 390px assert the composer input is visible/enabled on mode-home; all pass. Tablet/desktop (667–1280px) still portal the composer into the hero.

🤖 Generated with Claude Code

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

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

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved responsive behavior for the home search composer on desktop-sized screens.
  • Prevented duplicate or prematurely displayed search composers while the desktop layout is initializing.
  • Ensured the inline search composer returns correctly when the desktop composer is unavailable or no longer applicable.

Walkthrough

The desktop home composer now uses a 640px media-query breakpoint, tracks media-query matches separately from portal activation, resets that state during lifecycle changes, and uses it to control inline fallback rendering.

Changes

Desktop home composer

Layer / File(s)	Summary
Track desktop composer media state src/components/clinical-dashboard/master-search-header.tsx	The composer media query uses a 640px breakpoint, with match state synchronized and reset across slot and effect lifecycle paths.
Gate inline composer fallback src/components/clinical-dashboard/master-search-header.tsx	The inline fallback composer is suppressed when the desktop slot's media query matches, alongside the existing portal activation and host checks.

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

🚥 Pre-merge checks | ✅ 11

✅ Passed checks (11 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: restoring the search composer on phone-width mode-home pages.
Description check	✅ Passed	The description covers problem, cause, fix, and verification, but it does not follow the template's Summary/checkbox format exactly.
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.
Generated And Sensitive Files	✅ Passed	Only one TSX source file changed; no secrets, .envs, caches, build outputs, or generated artifacts were committed.
Verification Claims	✅ Passed	Verification section names exact commands and outcomes: npm run typecheck clean and npm run test:e2e:chromium passes.
Risky Git Or Deployment Actions	✅ Passed	The PR only changes composer visibility logic; the touched diff contains no force-push, reset, destructive clean, or deployment instructions.
Supabase Project And Schema Safety	✅ Passed	Only src/components/clinical-dashboard/master-search-header.tsx changed; no Supabase refs, migrations, RLS/policy, or schema/data changes found.
Runtime And Package Manager Integrity	✅ Passed	Only src/components/clinical-dashboard/master-search-header.tsx changed; npm@11.17.0, Node 24/npm 11 engines, and engine-strict=true remain intact.
Api Route Failure Handling	✅ Passed	Patch only changes client-side composer visibility/state in a UI component; no API route, server action, RAG, ingestion, or provider integration code is touched.

✨ 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/mobile-search-bar-fix

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/mobile-search-bar-fix

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/clinical-dashboard/master-search-header.tsx (1)

716-742: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Fallback stays suppressed when the slot never mounts

setDesktopHomeComposerMediaMatches(mediaQuery.matches) is set from the media query alone, so a missing or misnamed desktopHomeComposerSlotId leaves that flag true even after retries stop. Because the render gate hides the inline composer whenever desktopHomeComposerSlotId && desktopHomeComposerMediaMatches is true, the composer can disappear on tablet/desktop with no fallback. Tie the suppression to the portal actually mounting, or clear the media-match flag when retries are exhausted.

🤖 Prompt for 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.

In `@src/components/clinical-dashboard/master-search-header.tsx` around lines 716
- 742, Update syncTarget to keep desktopHomeComposerMediaMatches synchronized
with successful portal mounting: set it true only when the matching slot exists
and the host is attached, and set it false when the slot is missing, especially
when portalRetryCount reaches the retry limit. Preserve the existing retry
behavior while ensuring the render gate can fall back to the inline composer
after retries are exhausted.

🤖 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.

Outside diff comments:
In `@src/components/clinical-dashboard/master-search-header.tsx`:
- Around line 716-742: Update syncTarget to keep desktopHomeComposerMediaMatches
synchronized with successful portal mounting: set it true only when the matching
slot exists and the host is attached, and set it false when the slot is missing,
especially when portalRetryCount reaches the retry limit. Preserve the existing
retry behavior while ensuring the render gate can fall back to the inline
composer after retries are exhausted.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 038cb7ed-eca4-4e0d-88ef-aa6acb3b02e6

📥 Commits

Reviewing files that changed from the base of the PR and between 01f2cee and b73196c.

📒 Files selected for processing (1)

• src/components/clinical-dashboard/master-search-header.tsx