fix(mobile): restore the scroll-row trailing fade dropped by the CSS compiler

[BigSimmo]

Summary

• On phones, the horizontal trailing-fade on .answer-suggestion-row-scroll (the mobile scroll rows used by the prescribing "Medication checks" shortcuts, differentials "Recent work", etc.) had disappeared. The source globals.css declared an unconditional mask-image gradient plus a @media (min-width: 640px) { mask-image: none } reset — but Lightning CSS (Tailwind v4's compiler) collapsed the base rule, since its only media override was the mask, and dropped the gradient from the compiled output entirely. The near-identical .answer-suggestion-chips-scroll survived only because its min-width:640px override also changes other properties, so the compiler kept those two rules distinct.
• Fix: scope the fade to a single @media (max-width: 639px) block instead of the unconditional-base + desktop-reset pair. There's no base rule left for the compiler to merge away, so the declaration survives. Behavior is identical in intent — gradient below 640px, none from sm up.

This was not introduced by PR #473 (which only touched the 5 composer TSX files); it surfaced from later home-layout CSS work in globals.css.

Verification

• Ran npx playwright test tests/ui-tools.spec.ts -g "prescribing mobile shortcuts and checks are distinct|differentials recent work remains touch-sized" --project=chromium --repeat-each=2: passed (4/4). (Both were consistently failing on main beforehand: 4/4 failed.)
• Ran npx playwright test tests/ui-tools.spec.ts --project=chromium: passed (44/44) — no regressions.
• Ran npm run lint: passed.
• Ran git diff --check: passed (clean, no whitespace/conflict markers).
• Ran a headless-Chromium computed-style probe against the running dev server: at 320px width getComputedStyle(row).maskImage === linear-gradient(90deg, rgb(0,0,0) calc(100% - 16px), rgba(0,0,0,0)) (present); at 768px === none — passed (behavior preserved at both breakpoints).
• Not run: npm run verify:release — reason: out of scope for a single decorative-CSS-rule fix; the relevant Chromium UI suite (ui-tools) was run directly and passed.

Clinical Governance Preflight

Not applicable: this is a single CSS mask-image scoping change to a decorative scroll-row fade. It does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output.

Notes

• Root cause is a Lightning CSS rule-merging edge case, not the gradient text (the identical gradient compiles fine on .answer-suggestion-chips-scroll). A comment in globals.css records why the mask is scoped this way so it isn't "simplified" back into the dropped form.

🤖 Generated with Claude Code

https://claude.ai/code/session_013mCpzKWTCtBSLC6p1NsSWo

[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

Walkthrough

The search suggestion scroll row’s gradient mask is now applied only at viewport widths below 640px. The previous mask-disabling override near the breakpoint has been removed.

Changes

Mobile suggestion fade

Layer / File(s)	Summary
Scope suggestion fade to mobile src/app/globals.css	The row’s mask-image and -webkit-mask-image gradients are scoped to the mobile media query, and the previous none override is removed.

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

---

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

• Ignore

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Verification Claims	❌ Error	PR text says it “Verified the two affected tests...” and reports a “Direct CSS probe” without exact commands, violating the required verification wording.	Rewrite each verification claim as “Ran : ” or “Not run: .”

✅ Passed checks (10 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: restoring the mobile scroll-row trailing fade after compiler removal.
Description check	✅ Passed	The description includes the required Summary and Verification sections, plus notes and test evidence, so it is mostly complete.
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	PR changes only src/app/globals.css; diff scan found no node_modules/.next/build outputs or secret-like files.
Risky Git Or Deployment Actions	✅ Passed	PR only changes src/app/globals.css (CSS fade scoping); no instructions, scripts, workflows, or docs added risky git/deployment actions.
Supabase Project And Schema Safety	✅ Passed	PR only changes src/app/globals.css; no Supabase project refs, schema, migrations, RLS/policy, or env changes are present.
Runtime And Package Manager Integrity	✅ Passed	Only src/app/globals.css changed in the commit; no package manager, lockfile, engine, or Node/npm workflow files were touched.
Api Route Failure Handling	✅ Passed	Only src/app/globals.css changed; no API route, server action, RAG, search, ingestion, or provider code was 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/fix-scroll-row-mask-mobile

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/fix-scroll-row-mask-mobile

---

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