fix(ui): stop Tools filter row wrapping on medium screens

[BigSimmo]

Summary

Responsive fixes for the Tools page (/applications, the Applications Launcher):

• Filter row no longer breaks on medium screens. The "All tools" heading and the filter chips + "Sort by" pill were forced into a two-column justify-between row from sm (640px), so between ~640–1024px the chips only got half the width and wrapped messily. Raised that breakpoint to lg, so the heading and controls stay stacked (full width, no awkward wrap) until the desktop card grid turns on at lg, then sit side-by-side. Hid the static "Sort by A to Z" pill below lg so the six chips keep the full row and stay on one line.
• Dropped a dead phone bottom-padding reserve (pb-[calc(12rem+…)]) on the launcher main. The mode-home search composer already renders in the centered hero on phones (same min-width:0px hero-portal path the other mode homes use), so that reserve was empty space.
• Locked in phone/tablet/desktop search centering for Tools by adding /applications to the existing mode-home centering regression tests in tests/ui-tools.spec.ts (Tools was the only standalone mode home missing from them).

No behavior change to retrieval, ranking, answer generation, ingestion, source rendering, document access, privacy, or production env — this is presentational CSS plus test coverage.

Verification

Local gates run on this branch (cut fresh from origin/main), reported honestly:

• npm run format:check — pass (required CI gate; not part of verify:cheap).

• npm run verify:cheap — pass (check:runtime, github-actions, sitemap:check, lint, typecheck, full vitest).

• Targeted Chromium E2E: tests/ui-tools.spec.ts + tests/ui-smoke.spec.ts (the required ui-smoke gate) — pass. Also verified the new Tools centering entries and swept the filter-row layout at 640/768/800/900/1000/1024/1100/1280px (single-row chips, no horizontal overflow).

• npm run verify:pr-local — not run as a single script; equivalent surface covered by format:check + verify:cheap + targeted UI specs above.

• npm run verify:ui — ran the two relevant Chromium specs directly (ui-tools + ui-smoke) instead of the full matrix; this worktree's full Turbopack e2e run is slow/flaky (cold-compile webServer timeouts). CI runs the authoritative required gates.

• N/A npm run eval:retrieval:quality — no retrieval/ranking/selection/chunking/scoring change.

• N/A npm run eval:rag / eval:quality — no answer-generation change.

• N/A npm run check:production-readiness / check:deployment-readiness — no clinical workflow, privacy, env, Supabase, governance, or deployment change.

Clinical Governance Preflight

N/A — this change is a responsive-layout fix plus test coverage. It does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output.

Notes

• This PR was cut fresh from current origin/main to isolate only this session's UI change. A pre-existing, unrelated docs commit that happened to sit on the working branch (648abfa3f, a Next.js version/date bump in the readiness checklist) was intentionally left off this PR and remains as local work on the other branch.

[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 applications launcher’s responsive padding and “All tools” header breakpoints were adjusted. Existing mobile and tablet/desktop UI layout tests now also cover the /applications route.

Changes

Applications launcher layout

Layer / File(s)	Summary
Responsive launcher layout src/components/applications-launcher-page.tsx	Main padding and “All tools” header breakpoints were updated, while FilterTabs wiring remains unchanged.
Applications route responsive coverage tests/ui-tools.spec.ts	Mobile and tablet/desktop shared-search positioning tests now include the /applications route.

Estimated code review effort: 2 (Simple) | ~10 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	The PR text says “Formatting checks, verification, targeted Chromium tests, and responsive layout sweeps passed” without naming exact commands/checks.	Rewrite every pass claim to name the exact command or check and result, e.g. npm run verify:cheap: pass; remove generic “passed” summaries.

✅ Passed checks (10 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main UI fix on the Tools page and matches the changeset.
Description check	✅ Passed	The description follows the template well with Summary, Verification, Clinical Governance, and Notes, and only omits a non-critical release check.
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	Only two tracked source/test files changed; no secrets, credentials, or generated/local artifact files are present in the PR.
Risky Git Or Deployment Actions	✅ Passed	The PR only changes launcher layout CSS and adds /applications test coverage; no risky git/deployment instructions or destructive actions appear in the diff.
Supabase Project And Schema Safety	✅ Passed	Only UI/test files changed; no app/env/migration/schema/policy/RLS/Supabase project refs or destructive DB changes were modified.
Runtime And Package Manager Integrity	✅ Passed	Only src/components/applications-launcher-page.tsx and tests/ui-tools.spec.ts changed; no package/runtime files were touched, and repo config still pins npm@11.17.0, Node 24.x, and engine-strict=true.
Api Route Failure Handling	✅ Passed	Diff is UI/test-only; no API route, server action, RAG/search, ingestion, or provider code changed, so failure-handling review is not applicable.

✨ 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/tools-responsive-layout

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/tools-responsive-layout

---

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