Fix mode home responsive layout consistency

src/components/ClinicalDashboard.tsx

@@ -3054,15 +3054,24 @@ export function ClinicalDashboard({
   const showDesktopHomeComposer =
     !error &&
     (activeModeResultKind === "tools" ||
-      activeModeResultKind === "favourites" ||
+      (activeModeResultKind === "favourites" && favouritesAccessible) ||
       (!loading &&
         (showAnswerHome ||
           (searchMode === "documents" &&
             activeModeResultKind === "documents" &&
             documentMatches.length === 0 &&
             !modeSearchSubmitted) ||
-          (searchMode === "prescribing" && activeModeResultKind === "documents" && !modeSearchSubmitted) ||
-          (activeModeResultKind === "differentials" && !modeSearchSubmitted))));
+          // Prescribing home unmounts as soon as the query is non-empty, so keep
+          // the hero/phone-composer slot only while MedicationHome actually mounts.
+          (searchMode === "prescribing" &&
+            activeModeResultKind === "documents" &&
+            !modeSearchSubmitted &&
+            !query.trim()) ||
+          // DifferentialsHome leaves ModeHomeTemplate when a draft query coincides
+          // with stale evidence matches — keep the hero slot only while home mounts.
+          (activeModeResultKind === "differentials" &&
+            !modeSearchSubmitted &&
+            !(query.trim() && documentMatches.length > 0)))));
   const desktopHomeComposerSlotId = showDesktopHomeComposer ? modeHomeDesktopComposerSlotId : undefined;
   // Favourites and Tools are content-rich hubs: they share the centred hero but
   // stay top-aligned so their lists start in a stable position.
@@ -3076,13 +3085,15 @@ export function ClinicalDashboard({
     ((searchMode === "services" || searchMode === "forms") && !modeSearchSubmitted && !query.trim() && !loading);
   const differentialsCompareAddonActive =
     searchMode === "differentials" && modeSearchSubmitted && Boolean(query.trim());
+  const heroOwnsPhoneComposer = Boolean(desktopHomeComposerSlotId);
   // Hidden dock pad must stay at 0rem — Safari toolbar safe-area recreates a blank band.
   const mobileComposerReserve = resolveMobileComposerReserve(
     bottomComposerHidden,
     resolveDashboardVisibleMobileComposerReserve({
       searchMode,
       hasAnswerFollowUps: answerFollowUpSuggestions.length > 0,
       differentialsCompareAddonActive,
+      heroOwnsPhoneComposer,
     }),
   );
   const renderDegradedNotice = () => (
@@ -3362,10 +3373,9 @@ export function ClinicalDashboard({
             differentialsCompareAddonActive ? differentialsMobileCompareAddonSlotId : undefined
           }
           desktopHomeComposerSlotId={desktopHomeComposerSlotId}
-          // Only the answer home ("How can I help?") keeps the in-flow hero
-          // pill + privacy notice on phones; every other mode home docks the
-          // compact pill to the bottom edge below sm.
-          heroComposerBreakpoint={showAnswerHome ? "all" : "sm-up"}
+          // Mode homes keep the composer in the centred hero at every breakpoint,
+          // sharing the phone/tablet structure instead of switching to a bottom dock.
+          heroComposerBreakpoint={heroOwnsPhoneComposer ? "all" : "sm-up"}
           // Answer view: the header overlays the scrolling <main> at every width
           // (main reserves matching top padding) so content frosts under the
           // glass bar, and it slides away/returns with scroll direction. Other

src/components/clinical-dashboard/mobile-composer-reserve.ts

@@ -58,7 +58,15 @@ export function resolveDashboardVisibleMobileComposerReserve(input: {
   searchMode: string;
   hasAnswerFollowUps: boolean;
   differentialsCompareAddonActive: boolean;
+  /** Hero owns the phone composer (no fixed bottom dock) — match shell idle pad. */
+  heroOwnsPhoneComposer?: boolean;
 }): string {
+  // Mode homes / answer home keep the in-flow hero pill on phones, so there is
+  // no floating dock to clear — only the idle content pad (same as standalone
+  // shell mode homes). Using the dock reserve here opens a blank bottom band.
+  if (input.heroOwnsPhoneComposer) {
+    return mobileComposerIdleReserve;
+  }
   if (input.searchMode === "answer") {
     return input.hasAnswerFollowUps
       ? mobileComposerVisibleReserve.dashboardAnswerWithFollowUps

src/components/mode-home-template.tsx

@@ -261,7 +261,7 @@ export function ModeHomeTemplate({
       {actions?.length ? (
         <section
           aria-label={actionsLabel}
-          className="grid w-full max-w-none overflow-hidden rounded-none border-y border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-card)] sm:max-w-none sm:grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] sm:gap-3 sm:overflow-visible sm:rounded-xl sm:border sm:shadow-[var(--shadow-card)] lg:rounded-none lg:border-0 lg:bg-transparent lg:shadow-none"
+          className="grid w-full max-w-none overflow-hidden rounded-none border-y border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-card)] lg:max-w-none lg:grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] lg:gap-3 lg:overflow-visible lg:rounded-none lg:border-0 lg:bg-transparent lg:shadow-none"
         >
           {actions.map((action, index) => {
             const ActionIcon = action.icon;
@@ -285,8 +285,10 @@ export function ModeHomeTemplate({
               </>
             );
             const actionClassName = cn(
-              "mode-home-action group grid min-h-[4.4rem] w-full grid-cols-[2.5rem_minmax(0,1fr)_1.25rem] items-center gap-3 bg-[color:var(--surface)] px-4 py-3 text-left transition hover:bg-[color:var(--surface-subtle)] focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60 sm:min-h-[4.75rem] sm:grid-cols-[2.75rem_minmax(0,1fr)_1rem] sm:gap-3 sm:rounded-lg sm:border sm:border-[color:var(--border)] sm:px-4 sm:py-3.5 sm:shadow-[var(--shadow-card)] lg:min-h-[4.75rem] lg:px-5",
-              index > 0 && "border-t border-[color:var(--border)] sm:border-t-[color:var(--border)]",
+              "mode-home-action group grid min-h-[4.4rem] w-full grid-cols-[2.5rem_minmax(0,1fr)_1.25rem] items-center gap-3 bg-[color:var(--surface)] px-4 py-3 text-left transition hover:bg-[color:var(--surface-subtle)] focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60 sm:min-h-[4.4rem] sm:grid-cols-[2.5rem_minmax(0,1fr)_1.25rem] sm:px-4 sm:py-3 lg:min-h-[4.75rem] lg:grid-cols-[2.75rem_minmax(0,1fr)_1rem] lg:gap-3 lg:rounded-lg lg:border lg:border-[color:var(--border)] lg:px-5 lg:py-3.5 lg:shadow-[var(--shadow-card)]",
+              // Phone stack separator only — at lg each action is its own card
+              // with `lg:border`, so do not zero the card's top edge.
+              index > 0 && "max-lg:border-t max-lg:border-[color:var(--border)]",
             );
 
             if (action.href) {

tests/mobile-composer-reserve.test.ts

@@ -1,3 +1,6 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
 import { describe, expect, it } from "vitest";
 
 import {
@@ -12,6 +15,10 @@ import {
   resolveShellVisibleMobileComposerReserve,
 } from "@/components/clinical-dashboard/mobile-composer-reserve";
 
+function source(relativePath: string): string {
+  return readFileSync(resolve(process.cwd(), relativePath), "utf8");
+}
+
 describe("mobile composer reserve contract", () => {
   it("collapses to zero hidden pad without Safari toolbar safe-area", () => {
     expect(mobileComposerHiddenReserve).toBe("0rem");
@@ -54,7 +61,7 @@ describe("mobile composer reserve contract", () => {
     ).toBe(mobileComposerIdleReserve);
   });
 
-  it("uses the compact dock reserve for every non-answer dashboard dock (mode homes included)", () => {
+  it("uses the compact dock reserve for non-answer dashboard docks when the hero does not own phones", () => {
     for (const searchMode of ["documents", "services", "forms", "tools", "favourites"]) {
       expect(
         resolveDashboardVisibleMobileComposerReserve({
@@ -66,6 +73,66 @@ describe("mobile composer reserve contract", () => {
     }
   });
 
+  it("keeps only the idle content pad when the dashboard hero owns the phone composer", () => {
+    expect(
+      resolveDashboardVisibleMobileComposerReserve({
+        searchMode: "documents",
+        hasAnswerFollowUps: false,
+        differentialsCompareAddonActive: false,
+        heroOwnsPhoneComposer: true,
+      }),
+    ).toBe(mobileComposerIdleReserve);
+    expect(
+      resolveDashboardVisibleMobileComposerReserve({
+        searchMode: "tools",
+        hasAnswerFollowUps: false,
+        differentialsCompareAddonActive: false,
+        heroOwnsPhoneComposer: true,
+      }),
+    ).toBe(mobileComposerIdleReserve);
+    expect(
+      resolveDashboardVisibleMobileComposerReserve({
+        searchMode: "answer",
+        hasAnswerFollowUps: false,
+        differentialsCompareAddonActive: false,
+        heroOwnsPhoneComposer: true,
+      }),
+    ).toBe(mobileComposerIdleReserve);
+  });
+
+  it("derives hero phone ownership from the mounted hero slot, not answer-home alone", () => {
+    // Answer-home + !canRunSearch keeps showAnswerHome true while the hero slot
+    // is unset (showDesktopHomeComposer requires !error). Ownership must follow
+    // the slot so the dock reserve stays and the fixed composer cannot cover the
+    // setup/error message.
+    const dashboard = source("src/components/ClinicalDashboard.tsx");
+    const header = source("src/components/clinical-dashboard/master-search-header.tsx");
+    expect(dashboard).toContain('(activeModeResultKind === "favourites" && favouritesAccessible)');
+    expect(dashboard).toContain("const heroOwnsPhoneComposer = Boolean(desktopHomeComposerSlotId);");
+    expect(dashboard).not.toContain("const heroOwnsPhoneComposer = showDesktopHomeComposer || showAnswerHome;");
+    // Prescribing leaves MedicationHome as soon as the draft query is non-empty;
+    // keep the hero slot (and idle phone reserve) only while that home mounts.
+    expect(dashboard).toMatch(
+      /searchMode === "prescribing" &&\s*activeModeResultKind === "documents" &&\s*!modeSearchSubmitted &&\s*!query\.trim\(\)/,
+    );
+    // DifferentialsHome shows results (no mode-home slot) when a draft query
+    // coincides with stale evidence matches after clearing a submitted search.
+    expect(dashboard).toMatch(
+      /activeModeResultKind === "differentials" &&\s*!modeSearchSubmitted &&\s*!\(query\.trim\(\) && documentMatches\.length > 0\)/,
+    );
+    expect(header).toContain(
+      'const heroComposerOwnsPhones = Boolean(desktopHomeComposerSlotId) && heroComposerBreakpoint === "all";',
+    );
+    expect(
+      resolveDashboardVisibleMobileComposerReserve({
+        searchMode: "answer",
+        hasAnswerFollowUps: false,
+        differentialsCompareAddonActive: false,
+        heroOwnsPhoneComposer: false,
+      }),
+    ).toBe(mobileComposerVisibleReserve.dashboardAnswer);
+  });
+
   it("keeps the answer dock reserve compact, growing only for the follow-up chip row", () => {
     expect(
       resolveDashboardVisibleMobileComposerReserve({

tests/therapy-compass-responsive-contract.test.ts

@@ -61,7 +61,7 @@ describe("Therapy Compass responsive contract", () => {
     expect(responsiveStackCount(therapyCardSource)).toBeGreaterThanOrEqual(2);
     expect(homeSource).toContain("ModeHomeMain");
     expect(homeSource).toContain("ModeHomeTemplate");
-    expect(modeHomeTemplateSource).toContain("sm:grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]");
+    expect(modeHomeTemplateSource).toContain("lg:grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]");
     expect(modeHomeTemplateSource).toContain("sm:flex-wrap");
     expect(homeSource).toContain("desktopComposerSlotId={modeHomeDesktopComposerSlotId}");
     expect(homeSource).toContain("ModeHomeVerificationFooter");

tests/ui-smoke.spec.ts

@@ -2965,9 +2965,11 @@ test.describe("Clinical KB UI smoke coverage", () => {
     expect(startHereBox).not.toBeNull();
     expect(documentsHeadingBox).not.toBeNull();
     expect((documentsHeadingBox?.y ?? 0) + (documentsHeadingBox?.height ?? 0)).toBeLessThan(searchInputBox?.y ?? 0);
-    // Phones dock the compact composer at the bottom edge, below the hero content.
-    expect(searchInputBox?.y ?? 0).toBeGreaterThan(startHereBox?.y ?? 0);
-    await expect(page.locator('form.answer-footer-search-dock[data-footer-variant="compact"]')).toHaveCount(1);
+    // Phones keep the compact composer in the mode-home hero (above Start here),
+    // matching every other mode home — no fixed bottom dock on the empty home.
+    expect(searchInputBox?.y ?? 0).toBeLessThan(startHereBox?.y ?? 0);
+    await expect(page.locator('form.answer-footer-search-dock[data-footer-variant="compact"]')).toHaveCount(0);
+    await expect(page.locator(".mode-home-composer-slot").getByTestId("global-search-input")).toHaveCount(1);
     const recentDocumentsButton = page.getByRole("button", { name: /Recent documents/i }).first();
     const browseLibraryButton = page.getByRole("button", { name: /Browse library/i }).first();
     const sourcePdfButton = page.getByRole("button", { name: /Open a source PDF/i }).first();

tests/ui-tools.spec.ts

@@ -386,8 +386,9 @@ test.describe("Clinical KB tools launcher", () => {
       await expect(page.getByLabel("Mode Tools")).toBeVisible();
       await expect(visibleGlobalSearchInput(page)).toHaveCount(1);
       if (viewport.name === "mobile") {
-        // Phones dock the compact shared search at the bottom edge.
-        await expect(page.locator("form.answer-footer-search-dock").getByTestId("global-search-input")).toBeVisible();
+        // Phones keep the compact shared search in the tools-home hero slot.
+        await expect(page.getByTestId("tools-home").getByTestId("global-search-input")).toBeVisible();
+        await expect(page.locator("form.answer-footer-search-dock")).toHaveCount(0);
       } else {
         await expect(page.getByTestId("tools-home").getByTestId("global-search-input")).toBeVisible();
       }