fix(ui): make medication results edge-to-edge on phones

[BigSimmo]

Summary

• make medication search results edge-to-edge on phones while preserving safe-area insets
• keep the card layout through tablet widths and switch to the desktop table at 1024px
• add responsive stress coverage from 320px through 1920px

Verification

• runtime, GitHub action pins, sitemap, brand, type scale, icon scale, ESLint, and TypeScript checks passed
• Vitest: 264 files passed, 1 skipped; 2469 tests passed, 1 skipped
• focused Chromium responsive stress test: 1 passed across eight viewport widths
• provider credentials were absent; no OpenAI or Supabase service calls were made

Summary by CodeRabbit

• New Features
  • Enhanced responsive medication results UI with consistent safe-area spacing across phone and tablet layouts.
  • Improved selected-state visuals for mobile medication result cards.
• Bug Fixes
  • Prevented horizontal overflow on narrow screens and refined breakpoint behavior for showing the correct mobile vs desktop results.
  • Updated loading/error and empty-result presentations for more accurate states.
• Tests
  • Added medication responsive stress coverage, including multi-viewport checks for layout alignment, viewport bounds, and scroll behavior.

[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: dbc360a0-fc93-4945-bf76-3f7b78e1a3e8

📥 Commits

Reviewing files that changed from the base of the PR and between 30ad3f0 and df8b99c.

📒 Files selected for processing (1)

• src/components/clinical-dashboard/medication-prescribing-workspace.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/clinical-dashboard/medication-prescribing-workspace.tsx

---

📝 Walkthrough

Walkthrough

Medication prescribing results now use responsive layout classes, safe-area-aware styling, selected mobile-row indicators, revised empty states, and updated desktop/mobile breakpoints. New Playwright stress coverage validates medication layouts across viewport sizes.

Changes

Medication responsive results

Layer / File(s)	Summary
Results structure and state handling src/components/clinical-dashboard/medication-prescribing-workspace.tsx	Adds medication-specific layout classes, shared inset wrappers, revised empty states and breakpoints, and data-selected attributes for mobile result cards.
Responsive medication result styling src/app/globals.css	Adds mobile full-bleed layouts, safe-area padding, row surfaces, selected-row styling, and intermediate-width adjustments.
Medication responsive stress coverage tests/ui-stress.spec.ts	Mocks medication and search data and validates overflow, breakpoint visibility, geometry, padding, and scrolling across viewport sizes.

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

Possibly related PRs

• BigSimmo/Database#477: Both modify medication result rendering in medication-prescribing-workspace.tsx.
• BigSimmo/Database#663: Both modify desktop and mobile medication result rows in MedicationResults.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main UI change: making medication results edge-to-edge on phones.
Description check	✅ Passed	The description matches the template's Summary and Verification sections and includes concrete test results relevant to the UI change.
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/medication-mobile-edge-to-edge-20260717

---

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

[coderabbitai]

Actionable comments posted: 1

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

Inline comments:
In `@src/components/clinical-dashboard/medication-prescribing-workspace.tsx`:
- Around line 489-499: Replace the mojibake text in the loading message within
the catalog loading branch of the medication results UI with a correctly encoded
ellipsis, preserving the existing wording and markup.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b90f2676-8e58-459c-a080-81df2a1a3ccb

📥 Commits

Reviewing files that changed from the base of the PR and between 68a58f6 and 30ad3f0.

📒 Files selected for processing (3)

• src/app/globals.css
• src/components/clinical-dashboard/medication-prescribing-workspace.tsx
• tests/ui-stress.spec.ts