From 7ea68d1621226330adb117548fa334d610a9e241 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Jul 2026 10:59:14 +0000
Subject: [PATCH 1/6] fix(ui): restore edge-to-edge phone search dock

Stop the white strip under the bottom search bar by pinning the
ClinicalDashboard phone shell with fixed inset-0 (no 100dvh dead band),
forcing dock bottom:0 with safe-area as internal padding, and painting
opaque dock chrome through the home-indicator band. Tighten Playwright
geometry asserts and cover factsheets mode-home hero placement.

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 src/app/globals.css                           | 53 ++++++++++++++-----
 src/components/ClinicalDashboard.tsx          | 12 +++--
 .../global-search-shell.tsx                   |  7 ++-
 tests/ui-tools.spec.ts                        | 51 +++++++++++++++++-
 4 files changed, 100 insertions(+), 23 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 377d58ed..7e560bc4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -854,17 +854,19 @@ summary::-webkit-details-marker {
   z-index: 0;
   height: var(--footer-scrim-height);
   overflow: hidden;
+  /* Bottom of the scrim must reach near-opaque so the safe-area band under the
+     pill reads as continuous dock chrome (edge-to-edge), not a white strip. */
   background: linear-gradient(
     180deg,
     transparent 0%,
-    color-mix(in srgb, var(--background) 8%, transparent) 38%,
-    color-mix(in srgb, var(--background) 18%, transparent) 68%,
-    color-mix(in srgb, var(--background) 32%, transparent) 88%,
-    color-mix(in srgb, var(--background) 42%, transparent) 100%
+    color-mix(in srgb, var(--background) 12%, transparent) 32%,
+    color-mix(in srgb, var(--background) 48%, transparent) 62%,
+    color-mix(in srgb, var(--background) 82%, transparent) 84%,
+    var(--background) 100%
   );
   backdrop-filter: blur(2px) saturate(130%);
-  mask-image: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 45%) 28%, black 55%, black 100%);
-  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 45%) 28%, black 55%, black 100%);
+  mask-image: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 55%) 28%, black 52%, black 100%);
+  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 55%) 28%, black 52%, black 100%);
 }
 
 .answer-footer-search-dock .answer-footer-search-backdrop::before,
@@ -905,9 +907,9 @@ summary::-webkit-details-marker {
     background: linear-gradient(
       180deg,
       transparent 0%,
-      color-mix(in srgb, var(--background) 45%, transparent) 40%,
-      color-mix(in srgb, var(--background) 78%, transparent) 72%,
-      color-mix(in srgb, var(--background) 92%, transparent) 100%
+      color-mix(in srgb, var(--background) 45%, transparent) 36%,
+      color-mix(in srgb, var(--background) 82%, transparent) 68%,
+      var(--background) 100%
     );
   }
 
@@ -950,9 +952,9 @@ summary::-webkit-details-marker {
     background: linear-gradient(
       180deg,
       transparent 0%,
-      color-mix(in srgb, var(--background) 50%, transparent) 42%,
-      color-mix(in srgb, var(--background) 82%, transparent) 74%,
-      color-mix(in srgb, var(--background) 94%, transparent) 100%
+      color-mix(in srgb, var(--background) 50%, transparent) 36%,
+      color-mix(in srgb, var(--background) 86%, transparent) 72%,
+      var(--background) 100%
     );
   }
 
@@ -1794,7 +1796,11 @@ summary::-webkit-details-marker {
       0 8px 22px rgb(16 24 40 / 8%);
   }
 
-  /* Edge-to-edge phone dock: full-width footer, progressive scrim, inset pill. */
+  /* Edge-to-edge phone dock: full-width footer flush to the glass. The pill is
+     inset via padding-bottom only — never by a non-zero `bottom` offset (that
+     reintroduces a white strip under the bar). Form background paints the
+     safe-area pad so it reads as dock chrome, not empty page margin. */
+  .answer-footer-search-dock.answer-footer-search-edge,
   .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge,
   .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge {
     left: 0;
@@ -1806,15 +1812,24 @@ summary::-webkit-details-marker {
     padding-inline: max(0.75rem, var(--safe-area-left)) max(0.75rem, var(--safe-area-right));
     padding-top: 0.5rem;
     padding-bottom: max(0.5rem, var(--safe-area-bottom));
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      color-mix(in srgb, var(--background) 72%, transparent) 42%,
+      color-mix(in srgb, var(--background) 94%, transparent) 72%,
+      var(--background) 100%
+    );
   }
 
   .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge.document-mobile-search-compact,
-  .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge.document-mobile-search-compact {
+  .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge.document-mobile-search-compact,
+  .answer-footer-search-dock.answer-footer-search-edge.document-mobile-search-compact {
     padding-bottom: max(0.45rem, var(--safe-area-bottom));
   }
 
   /* Must beat the edge-to-edge dock rule above (transform: none) so scroll-hide
      actually slides the bar off-screen once data-scroll-hidden is set. */
+  .answer-footer-search-dock.answer-footer-search-edge[data-scroll-hidden="true"],
   .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge[data-scroll-hidden="true"],
   .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge[data-scroll-hidden="true"] {
     transform: translateY(calc(100% + env(safe-area-inset-bottom)));
@@ -2226,6 +2241,16 @@ html[data-motion="reduced"] .pwa-notice-card {
     }
   }
 
+  /* Phones: ClinicalDashboard pins with fixed inset-0 utilities. Do not keep a
+     dvh height clamp here — it recreates the Safari toolbar dead band under
+     the shell even when inset-0 is present if height still resolves to dvh. */
+  @media (max-width: 639px) {
+    .mobile-app-shell {
+      min-height: 0;
+      height: auto;
+    }
+  }
+
   /* Scroll and print helpers */
   .citation-link {
     position: relative;
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index 33edb7fb..8a8e67fe 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -3311,7 +3311,11 @@ export function ClinicalDashboard({
     <div
       className={cn(
         appBackdrop,
-        "mobile-app-shell flex flex-col overflow-hidden text-[color:var(--text)] md:grid md:grid-cols-[5.25rem_minmax(0,1fr)] md:overflow-hidden",
+        // Phone shell height comes from inset-0 alone, never 100dvh: iOS Safari
+        // re-resolves dvh lazily when its toolbar collapses/expands, leaving a
+        // white dead band under the clipped shell (and under the search dock).
+        // Fixed insets track the live viewport; sm+ keeps the dvh-sized shell.
+        "mobile-app-shell flex flex-col overflow-hidden text-[color:var(--text)] max-sm:fixed max-sm:inset-0 max-sm:h-auto max-sm:min-h-0 max-sm:overflow-hidden md:grid md:grid-cols-[5.25rem_minmax(0,1fr)] md:overflow-hidden",
         "motion-safe:transition-[grid-template-columns] motion-safe:duration-200 motion-safe:ease-out",
         sidebarCollapsed ? "lg:grid-cols-[5.25rem_minmax(0,1fr)]" : "lg:grid-cols-[20rem_minmax(0,1fr)]",
       )}
@@ -3446,9 +3450,9 @@ export function ClinicalDashboard({
                   // bottom-clamp guard in use-hide-on-scroll prevents false reveals.
                   "max-sm:pb-[var(--mobile-composer-reserve)] max-sm:[scroll-padding-bottom:var(--mobile-composer-reserve)] sm:mb-24"
               : hasMobileBottomSearch
-                ? // Phones dock the compact composer on every non-answer view
-                  // (mode homes included), so they always reserve dock
-                  // clearance; sm+ keeps the in-flow hero/sticky composers.
+                ? // Phones dock the compact composer on non-answer result views
+                  // (answer home keeps the in-flow hero). Reserve dock clearance
+                  // on phones; sm+ keeps the in-flow hero/sticky composers.
                   "max-sm:pb-[var(--mobile-composer-reserve)] max-sm:[scroll-padding-bottom:var(--mobile-composer-reserve)] sm:mb-0"
                 : "mb-0",
           )}
diff --git a/src/components/clinical-dashboard/global-search-shell.tsx b/src/components/clinical-dashboard/global-search-shell.tsx
index 5a77df1d..d4d37251 100644
--- a/src/components/clinical-dashboard/global-search-shell.tsx
+++ b/src/components/clinical-dashboard/global-search-shell.tsx
@@ -345,10 +345,9 @@ function GlobalStandaloneSearchShellClient({
     !isDifferentialPresentationWorkflow &&
     (!isInfoPage || isToolDetailWithFooterSearch(pathname));
   const reservesFloatingComposer = shouldShowSearchComposer && !isStandaloneModeHome;
-  // Standalone mode homes keep the hero composer from sm up but dock the
-  // compact pill on phones, so they reserve dock clearance too. Document viewer
-  // routes own their own floating composer, so the shell keeps only a small pad
-  // and lets DocumentViewer manage visible-dock clearance.
+  // Standalone mode homes keep the in-flow hero pill at every width (no phone
+  // dock reserve). Document viewer routes own their own floating composer, so
+  // the shell keeps only a small pad and lets DocumentViewer manage clearance.
   // Release the large bottom reserve only when the phone bottom composer is
   // actually hidden (MasterSearchHeader's bottomComposerHidden). Header-only
   // scroll-hide, pinned compare addons, open menus/sheets, and composer focus
diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index 9b5e876b..d0d35699 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -607,6 +607,7 @@ test.describe("Clinical KB tools launcher", () => {
       { path: "/services", testId: "services-home" },
       { path: "/forms", testId: "forms-home" },
       { path: "/differentials", testId: "differentials-home" },
+      { path: "/factsheets", testId: "factsheets-home" },
       { path: "/favourites", testId: "favourites-hub" },
       { path: "/tools", testId: "tools-home" },
     ] as const) {
@@ -883,7 +884,9 @@ test.describe("Clinical KB tools launcher", () => {
           expect(metrics?.formCenterY ?? 0).toBeGreaterThan(viewport.height * 0.72);
           await expect(page.locator(".answer-footer-search-chip:visible")).toHaveCount(0);
           if (route.compactBottomSearch) {
-            expect(metrics?.formBottom ?? 0).toBeGreaterThanOrEqual(viewport.height - 48);
+            // Edge-to-edge dock: the form itself must sit flush to the viewport
+            // bottom (safe-area is padding inside the form, not a `bottom` gap).
+            expect(metrics?.formBottom ?? 0).toBeGreaterThanOrEqual(viewport.height - 2);
           }
         } else {
           expect(metrics?.position).toBe("sticky");
@@ -1053,6 +1056,52 @@ test.describe("Clinical KB tools launcher", () => {
     await expectNoPageHorizontalOverflow(page);
   });
 
+  test("phone bottom search dock stays edge-to-edge with safe-area padding inside the form", async ({ page }) => {
+    // Guards the white-strip regression: a non-zero CSS `bottom` on the dock
+    // (or a 100dvh shell dead band) leaves blank page chrome under the pill.
+    // Safe-area must be padding inside a form flush to the viewport bottom.
+    await page.setViewportSize({ width: 390, height: 844 });
+    const safeAreaBottom = 34;
+
+    for (const route of [
+      { path: "/forms?q=transport&run=1", resultsTestId: "form-search-mobile-results" },
+      { path: "/differentials?q=chest+pain&run=1", resultsTestId: "differentials-search-results" },
+    ] as const) {
+      await gotoLauncher(page, route.path);
+      await expect(page.getByTestId(route.resultsTestId)).toBeVisible({ timeout: 20_000 });
+      const dock = page.locator("form.answer-footer-search-dock");
+      await expect(dock, route.path).toBeVisible();
+      await expect(dock, route.path).not.toHaveAttribute("data-scroll-hidden", "true");
+
+      await page.evaluate((inset) => {
+        document.documentElement.style.setProperty("--safe-area-bottom", `${inset}px`);
+      }, safeAreaBottom);
+
+      const geometry = await dock.evaluate((node) => {
+        const style = window.getComputedStyle(node);
+        const formRect = node.getBoundingClientRect();
+        const pill = node.querySelector(".answer-footer-search-pill");
+        const pillRect = pill?.getBoundingClientRect();
+        return {
+          bottomCss: style.bottom,
+          paddingBottom: Number.parseFloat(style.paddingBottom),
+          formBottom: formRect.bottom,
+          pillBottom: pillRect?.bottom ?? null,
+          viewportHeight: window.innerHeight,
+        };
+      });
+
+      expect(geometry.bottomCss, route.path).toBe("0px");
+      expect(Math.abs(geometry.formBottom - geometry.viewportHeight), route.path).toBeLessThanOrEqual(1);
+      expect(geometry.paddingBottom, route.path).toBeGreaterThanOrEqual(safeAreaBottom - 1);
+      expect(geometry.pillBottom, route.path).not.toBeNull();
+      // Pill sits above the safe-area pad; do not require exact px (borders/gaps).
+      expect(geometry.pillBottom!, route.path).toBeLessThanOrEqual(
+        geometry.viewportHeight - safeAreaBottom + 2,
+      );
+    }
+  });
+
   test("phone bottom search dock hides while scrolling down on search results", async ({ page }) => {
     await page.emulateMedia({ reducedMotion: "no-preference" });
     await page.setViewportSize({ width: 390, height: 844 });

From 4b911266dc7c2195132e58588432b26d2077456a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Jul 2026 10:59:26 +0000
Subject: [PATCH 2/6] test(ui): use stable differentials query for dock edge
 assert

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 tests/ui-tools.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index d0d35699..2dcb96ce 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -1065,7 +1065,7 @@ test.describe("Clinical KB tools launcher", () => {
 
     for (const route of [
       { path: "/forms?q=transport&run=1", resultsTestId: "form-search-mobile-results" },
-      { path: "/differentials?q=chest+pain&run=1", resultsTestId: "differentials-search-results" },
+      { path: "/differentials?q=acute+confusion&run=1", resultsTestId: "differentials-search-results" },
     ] as const) {
       await gotoLauncher(page, route.path);
       await expect(page.getByTestId(route.resultsTestId)).toBeVisible({ timeout: 20_000 });

From 5f65a18394dbe3e2b0790a8b8cd441909264efe9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Jul 2026 11:03:03 +0000
Subject: [PATCH 3/6] fix(ui): apply ModeHomeHero testId for factsheets home
 coverage

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 src/components/mode-home-template.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx
index b0e77b08..4812b4ac 100644
--- a/src/components/mode-home-template.tsx
+++ b/src/components/mode-home-template.tsx
@@ -73,6 +73,7 @@ export function ModeHomeHero({
   // hero still fits a phone viewport without scrolling.
   return (
     <section
+      data-testid={testId}
       className="grid justify-items-center gap-1.5 px-4 sm:gap-3 sm:px-0"
       aria-labelledby={`${testId ?? "mode-home"}-title`}
     >

From 708715b43d36729b27a0e78b24eddccfb7f79f05 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Jul 2026 11:03:20 +0000
Subject: [PATCH 4/6] test(ui): assert factsheets home via factsheets-home-main

Revert ModeHomeHero data-testid to avoid duplicating ModeHomeTemplate ids.

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 src/components/mode-home-template.tsx | 1 -
 tests/ui-tools.spec.ts                | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx
index 4812b4ac..b0e77b08 100644
--- a/src/components/mode-home-template.tsx
+++ b/src/components/mode-home-template.tsx
@@ -73,7 +73,6 @@ export function ModeHomeHero({
   // hero still fits a phone viewport without scrolling.
   return (
     <section
-      data-testid={testId}
       className="grid justify-items-center gap-1.5 px-4 sm:gap-3 sm:px-0"
       aria-labelledby={`${testId ?? "mode-home"}-title`}
     >
diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index 2dcb96ce..33cf796a 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -607,7 +607,7 @@ test.describe("Clinical KB tools launcher", () => {
       { path: "/services", testId: "services-home" },
       { path: "/forms", testId: "forms-home" },
       { path: "/differentials", testId: "differentials-home" },
-      { path: "/factsheets", testId: "factsheets-home" },
+      { path: "/factsheets", testId: "factsheets-home-main" },
       { path: "/favourites", testId: "favourites-hub" },
       { path: "/tools", testId: "tools-home" },
     ] as const) {

From b2f37c4a9d6f61c798b7c47a2ae91393c25c6578 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Jul 2026 11:08:08 +0000
Subject: [PATCH 5/6] fix(ui): keep ClinicalDashboard under maintainability
 line budget

Compress shell comments so the file stays within the 4140-line
no-growth hotspot cap enforced by Static PR checks.

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 src/components/ClinicalDashboard.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index 8a8e67fe..51a31a70 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -3311,10 +3311,7 @@ export function ClinicalDashboard({
     <div
       className={cn(
         appBackdrop,
-        // Phone shell height comes from inset-0 alone, never 100dvh: iOS Safari
-        // re-resolves dvh lazily when its toolbar collapses/expands, leaving a
-        // white dead band under the clipped shell (and under the search dock).
-        // Fixed insets track the live viewport; sm+ keeps the dvh-sized shell.
+        // Phone: fixed inset-0 (not 100dvh) — matches GlobalSearchShell; avoids Safari toolbar dead band.
         "mobile-app-shell flex flex-col overflow-hidden text-[color:var(--text)] max-sm:fixed max-sm:inset-0 max-sm:h-auto max-sm:min-h-0 max-sm:overflow-hidden md:grid md:grid-cols-[5.25rem_minmax(0,1fr)] md:overflow-hidden",
         "motion-safe:transition-[grid-template-columns] motion-safe:duration-200 motion-safe:ease-out",
         sidebarCollapsed ? "lg:grid-cols-[5.25rem_minmax(0,1fr)]" : "lg:grid-cols-[20rem_minmax(0,1fr)]",
@@ -3450,9 +3447,7 @@ export function ClinicalDashboard({
                   // bottom-clamp guard in use-hide-on-scroll prevents false reveals.
                   "max-sm:pb-[var(--mobile-composer-reserve)] max-sm:[scroll-padding-bottom:var(--mobile-composer-reserve)] sm:mb-24"
               : hasMobileBottomSearch
-                ? // Phones dock the compact composer on non-answer result views
-                  // (answer home keeps the in-flow hero). Reserve dock clearance
-                  // on phones; sm+ keeps the in-flow hero/sticky composers.
+                ? // Phone dock reserve; sm+ keeps hero/sticky composers.
                   "max-sm:pb-[var(--mobile-composer-reserve)] max-sm:[scroll-padding-bottom:var(--mobile-composer-reserve)] sm:mb-0"
                 : "mb-0",
           )}

From c993975f6b18393a9ff09f9145fd42dbb35df942 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Jul 2026 11:53:54 +0000
Subject: [PATCH 6/6] style(test): prettier-format edge-to-edge dock assert

Static PR checks failed format:check on tests/ui-tools.spec.ts.

Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
---
 tests/ui-tools.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index 33cf796a..04a2db92 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -1096,9 +1096,7 @@ test.describe("Clinical KB tools launcher", () => {
       expect(geometry.paddingBottom, route.path).toBeGreaterThanOrEqual(safeAreaBottom - 1);
       expect(geometry.pillBottom, route.path).not.toBeNull();
       // Pill sits above the safe-area pad; do not require exact px (borders/gaps).
-      expect(geometry.pillBottom!, route.path).toBeLessThanOrEqual(
-        geometry.viewportHeight - safeAreaBottom + 2,
-      );
+      expect(geometry.pillBottom!, route.path).toBeLessThanOrEqual(geometry.viewportHeight - safeAreaBottom + 2);
     }
   });