fix(answer-dock): stop follow-up "Try next" chips overlapping the composer pill

[BigSimmo]

Summary

• On phones the answer dock renders the "Try next" follow-up suggestion row directly above the search pill. Its only vertical separator was a negativemargin-bottom (-0.125rem) on .answer-footer-search-edge .answer-suggestion-row-composer-followups, which tucked the chips' rounded underside beneath the pill's top edge and focus glow — reading as a collision on the search bar (the reported issue).
• Flipped that to a small positive gap (0.4375rem / 7px) so the chip row and the "Ask a follow-up…" pill read as distinct, intentionally-spaced tiers. The gap is deliberately kept modest so the row isn't pushed further up into the answer content that shows through the frosted scrim above.
• CSS-only, one rule in src/app/globals.css. Scoped to the phone answer dock (answer-suggestion-row-composer-followups is sm:hidden), so tablet/desktop and the in-thread follow-up layout are untouched.

Verified live against the running app with a Chromium screenshot pass — measured chip-row bottom 748→739 vs pill top 746, turning a −2px overlap into a +7px gap.

Verification

• npm run verify:pr-local
• npm run verify:ui

Verification not run: the automated gate (scripts/run-playwright.mjs) builds an isolated production app that fails typecheck on a pre-existing, unrelated error (tests/setup/jsdom.setup.ts is missing type declarations for @testing-library/jest-dom/vitest); this change is CSS-only and touches no TypeScript.

UI verification not run: the same pre-existing isolated-build typecheck failure blocks npm run verify:ui. Instead the fix was verified directly in a real browser (Playwright + Chromium against npm run ensure), capturing the phone answer dock at the natural and scrolled-to-bottom positions and measuring the chip↔pill geometry (−2px overlap → +7px gap). Existing ui-smoke.spec.ts follow-up tests assert visibility/interaction only (no pixel geometry), so behavior is unaffected.

Risk and rollout

• Risk: low — a single presentational spacing value on one phone-only composer row; no reflow of the pill, <main> scroll reserve, or scrim geometry.
• Rollback: revert this commit, which restores the prior -0.125rem margin.
• Provider or production effects: None.

Clinical Governance Preflight

Not applicable — this change is purely the vertical spacing of the composer's follow-up suggestion chips. It does not touch ingestion, answer generation, retrieval/ranking, source/citation rendering, document access, privacy, Supabase, production env, or clinical output. No answer content, source metadata, or access behavior changes.

Notes

• The faint "ALSO IN YOUR LIBRARY" text visible behind the chip row in some scroll positions is the app's existing translucent frosted-glass dock behavior (scrolled content reads through the scrim by design), not introduced here; a taller scrim was trialled but reverted since it only marginally dimmed the glass while broadening impact across all answer docks.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UnnEvbSGcJevNnPKhgb6xo

Summary by CodeRabbit

• Style
  • Improved spacing for phone follow-up suggestion chips above the answer dock.
  • Prevented rounded chip edges from overlapping the dock’s top edge or focus glow.

[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: e60758c5-2ab0-42e5-803e-8f8304531eba

📥 Commits

Reviewing files that changed from the base of the PR and between 110423a and b241199.

📒 Files selected for processing (1)

• src/app/globals.css

---

📝 Walkthrough

Walkthrough

The phone composer follow-up row now uses positive bottom spacing, with updated documentation describing separation from the answer pill and focus glow.

Changes

Mobile composer spacing

Layer / File(s)	Summary
Update phone follow-up spacing src/app/globals.css	Changes the follow-up row’s margin-bottom from -0.125rem to 0.4375rem and documents the non-overlapping spacing behavior.

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

Possibly related PRs

• BigSimmo/Database#431: Adjusts mobile answer-mode spacing and overlap behavior related to follow-up suggestions.
• BigSimmo/Database#520: Updates responsive answer/composer positioning in the same mobile layout area.

Suggested reviewers:claude, cursoragent

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the phone-only composer spacing fix and matches the main change.
Description check	✅ Passed	The description follows the template and includes summary, verification, risk, governance, and notes with clear blockers and manual validation.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/follow-up-design-sizing-250cop

---

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