Fix mobile differentials search layout and FAB behavior

[BigSimmo]

Motivation

• Mobile differentials search had layout and scroll issues: the compare action overlapped the bottom dock, was not reliably tappable on phones, and result list spacing could cause horizontal overflow.
• The compare CTA should be a clear, safe-area-aware FAB on phones and the initial result selection should seed compare availability immediately.

Description

• Restyles the mobile compare control into a fixed, safe-area-aware FAB and extracts button variants to .differentials-mobile-compare-fab* in src/app/globals.css.
• Ports the mobile compare portal host markup to render the new FAB wrapper and replaces the inline utility classes with the new FAB classes in src/components/clinical-dashboard/differentials-home.tsx.
• Seed the comparison selection on first result load by resetting lastResultSignature so the top two diagnosis results are selected automatically.
• Improve mobile containment and spacing by adding min-w-0, adjusting gaps/padding, and wrapping the source-status action to prevent horizontal overflow.
• Update the Playwright regression tests/ui-tools.spec.ts to scroll the actual #main-content scrollport and assert the FAB does not overlap the dock and that the page has no horizontal overflow.

Testing

• Ran dependency install with npm ci successfully with no vulnerabilities reported.
• Ran npm run typecheck, npm run lint, and npx prettier --check which all completed successfully.
• Ran git diff --check and formatting checks; they passed and the changes were committed on branch work as fix: polish mobile differentials search.
• Attempted the isolated Playwright/npm run test:e2e build and local npm run ensure but the Playwright production build and local server startup failed in this environment because Next failed to fetch Google-hosted Geist fonts (external network-font fetch), so the e2e browser verification could not complete here.
• Remaining risk: the Playwright e2e gate and local ensure require a network-enabled environment that allows fetching the Google fonts or local font provisioning before the full browser checks can be confirmed.

---

Codex Task

Summary by CodeRabbit

• New Features

  • Added a mobile floating compare action with selected and empty states.
  • Improved button styling, focus indicators, touch feedback, and safe-area positioning.

• Bug Fixes

  • Improved mobile results scrolling while keeping the compare action accessible.
  • Updated responsive layouts and source-search messaging for smaller screens.

• Tests

  • Expanded regression coverage for mobile scrolling and compare-action positioning.

[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: c68df37a-83d4-4b9a-a209-c8de1b5781ab

📥 Commits

Reviewing files that changed from the base of the PR and between 44a4c51 and 4d72d97.

📒 Files selected for processing (4)

• src/app/globals.css
• src/components/clinical-dashboard/differentials-home.tsx
• tests/mobile-interaction-regressions.test.ts
• tests/ui-tools.spec.ts

---

📝 Walkthrough

Walkthrough

The mobile differential compare action now uses dedicated FAB styling, safe-area positioning, and empty-state treatment. Search-results layout and initialization behavior were updated, with regression tests covering shell scrolling, horizontal overflow, and compare-action geometry.

Changes

Mobile differential compare interaction

Layer / File(s)	Summary
Compare FAB styling and wiring src/app/globals.css, src/components/clinical-dashboard/differentials-home.tsx	Adds safe-area-aware FAB positioning, gradient and focus states, and dedicated selected and empty-state compare classes.
Search-results layout and reset behavior src/components/clinical-dashboard/differentials-home.tsx	Updates result-signature initialization, horizontal overflow handling, responsive catalogue messaging, and source-search controls.
Mobile scrolling and geometry coverage tests/mobile-interaction-regressions.test.ts, tests/ui-tools.spec.ts	Verifies shell scrolling, forbids nested horizontal overflow behavior, and requires the compare action to remain above the bottom dock.

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

Possibly related PRs

• BigSimmo/Database#684: Updates the mobile differential compare action’s docking behavior and related interaction coverage.
• BigSimmo/Database#689: Changes global focus-visible styling that may affect the FAB focus rule.
• BigSimmo/Database#707: Modifies the same mobile compare scrolling and geometry test coverage.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers motivation, changes, and testing, but it omits several required template sections and checklist items.	Add the template sections: Summary, Verification checklist entries, Risk and rollout, Notes, and any applicable Clinical Governance Preflight items.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: mobile differentials search layout and FAB behavior.
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 codex/fix-issues-with-differential-search

---

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

[github-actions]

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

• Production UI — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #3362 (cancelled).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

[BigSimmo]

Closing as superseded by #886 (Fix mobile differentials search layout and FAB behavior). Preferring the newer Cursor PR with green CI.