From 45f646e1fdf43bf1201007ec9a502eed2e42717b Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 03:50:06 +0800
Subject: [PATCH] fix(ui): stop Tools filter row wrapping on medium screens

Raise the "All tools" header breakpoint from sm to lg so the heading and
the filter chips + Sort control stay stacked (full width, no awkward
wrap) until the desktop grid turns on. Hide the static Sort pill below
lg so the six chips get the full row and stay on one line.

Drop the dead phone bottom-padding reserve on the launcher main: the
mode-home search composer already renders in the centered hero on
phones, so the 12rem docked-composer reserve was empty space. Lock that
behaviour in by adding /applications (Tools) to the mobile and
tablet/desktop search-centering regression tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/applications-launcher-page.tsx | 5 ++---
 tests/ui-tools.spec.ts                        | 2 ++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx
index 72751025d..d5b3f194b 100644
--- a/src/components/applications-launcher-page.tsx
+++ b/src/components/applications-launcher-page.tsx
@@ -733,7 +733,6 @@ export function ApplicationsLauncherWorkspace({
       aria-labelledby="tools-home-title"
       className={cn(
         "mx-auto w-full max-w-[90rem] overflow-x-hidden px-4 pb-8 text-[color:var(--text)] sm:px-6 lg:px-8",
-        "pb-[calc(12rem+env(safe-area-inset-bottom))] sm:pb-8",
         "pt-7 sm:pt-10 lg:pt-14",
         className,
       )}
@@ -782,13 +781,13 @@ export function ApplicationsLauncherWorkspace({
         data-testid="tools-all-tools"
         className="mx-auto mt-8 grid max-w-[86rem] gap-4 sm:mt-10"
       >
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div className="text-left">
             <h2 className="text-lg font-extrabold text-[color:var(--text-heading)]">{copy.allSectionLabel}</h2>
           </div>
           <div className="flex items-center gap-3">
             <FilterTabs activeFilter={activeFilter} onFilterChange={setActiveFilter} />
-            <div className="hidden min-h-10 items-center gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] px-3 text-xs font-bold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] sm:inline-flex">
+            <div className="hidden min-h-10 items-center gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] px-3 text-xs font-bold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] lg:inline-flex">
               Sort by
               <span className="text-[color:var(--text-heading)]">A to Z</span>
               <ChevronDown className="h-3.5 w-3.5" aria-hidden />
diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index 8b290e6b3..eb795297d 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -418,6 +418,7 @@ test.describe("Clinical KB tools launcher", () => {
       { path: "/forms", testId: "forms-home", heading: "What do you need from forms?", headingLevel: 1 },
       { path: "/differentials", testId: "differentials-home", heading: "Differentials", headingLevel: 1 },
       { path: "/favourites", testId: "favourites-hub", heading: "Favourites command library", headingLevel: 1 },
+      { path: "/applications", testId: "tools-home", heading: "Tools", headingLevel: 1 },
     ] as const) {
       await gotoLauncher(page, home.path);
       await expect(page.getByTestId(home.testId)).toBeVisible();
@@ -557,6 +558,7 @@ test.describe("Clinical KB tools launcher", () => {
         { path: "/services", testId: "services-home", heading: "Find a service", headingLevel: 1 },
         { path: "/forms", testId: "forms-home", heading: "What do you need from forms?", headingLevel: 1 },
         { path: "/differentials", testId: "differentials-home", heading: "Differentials", headingLevel: 1 },
+        { path: "/applications", testId: "tools-home", heading: "Tools", headingLevel: 1 },
       ] as const) {
         await gotoLauncher(page, home.path);
         await expect(page.getByTestId(home.testId)).toBeVisible();