Fix mobile differentials search layout and FAB behavior

[BigSimmo]

Summary

• Polishes the mobile differentials search results layout (tighter spacing, min-width overflow guards, stacked source-status CTA on narrow phones).
• Restyles the mobile/tablet compare action as a fixed floating pill that stays tappable while results scroll, clears the bottom dock, and avoids horizontal overflow.
• Fixes phone scroll ownership by using overflow-x-clip so #main-content remains the scrollport for the fixed FAB.
• Supersedes Fix mobile differentials search layout and FAB behavior #877 with a policy-compliant description.

Verification

• npm run test -- --run tests/mobile-interaction-regressions.test.ts (pass)
• Focused Playwright: mobile differential compare action stays tappable while results scroll (pass)
• UI verification not run: full npm run verify:ui not executed after the focused Playwright proof; CI Production UI is the merge gate.

Risk and rollout

• Risk: low; layout/CSS scrollport ownership and mobile compare FAB presentation only. No API, retrieval, or clinical answer-generation contract changes.
• Rollback: revert the merge commit; prior inline compare bar restores previous scroll behavior.
• 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

  

Summary by CodeRabbit

• New Features

  • Added a mobile floating “Compare selected” action with accessible focus states, press feedback, and an empty-selection appearance.

• Improvements

  • Improved mobile results layout, spacing, overflow handling, and safe-area positioning.
  • Enhanced responsive styling for catalogue notices and source-search controls.
  • Initial search results now reset filters and preselect the first diagnoses.

• Bug Fixes

  • Improved mobile scrolling behavior while keeping the compare action visible and tappable.

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

Warning

Review limit reached

@cursor[bot], you've reached your PR review limit, so we couldn't start this review.

Next review available in: 21 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4b87a610-c3b9-4b62-8efd-065ef0096ba9

📥 Commits

Reviewing files that changed from the base of the PR and between 0750c4d and 4ea9894.

📒 Files selected for processing (1)

• src/app/globals.css

📝 Walkthrough

Walkthrough

The mobile differentials compare action now uses a fixed, styled FAB with selected and empty states. Results layout and initial selection synchronization were updated, and mobile regression tests now cover clipped overflow, page scrolling, and dock-relative FAB positioning.

Changes

Mobile differentials compare

Layer / File(s)	Summary
Compare FAB styling and wiring src/app/globals.css, src/components/clinical-dashboard/differentials-home.tsx	Adds fixed mobile FAB styling and applies it to selected and empty compare states while preserving links, conditional rendering, and test identifiers.
Results layout and selection synchronization src/components/clinical-dashboard/differentials-home.tsx	Triggers initial result-signature synchronization, updates results overflow and spacing, and adjusts catalogue and source-status responsive layouts.
Mobile interaction regression coverage tests/mobile-interaction-regressions.test.ts, tests/ui-tools.spec.ts	Checks clipped horizontal overflow, page-level scrolling, and compare-action positioning above the mobile dock.

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

Possibly related PRs

• BigSimmo/Database#483: Updates related mobile differentials compare and overflow Playwright coverage.
• BigSimmo/Database#684: Changes related mobile differentials compare dock behavior and scroll-hidden gating.
• BigSimmo/Database#877: Modifies the same compare FAB selectors, component classes, and overflow-related tests.

Suggested labels: codex

Suggested reviewers: claude, copilot

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title matches the PR’s main changes: mobile differentials layout polish and floating action button behavior.
Description check	✅ Passed	The description follows the template with Summary, Verification, Risk and rollout, and Clinical Governance sections, and includes test/skip notes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/mobile-differentials-fab-1ae0

---

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