Fix mobile differential compare action

src/components/clinical-dashboard/differentials-home.tsx

@@ -125,10 +125,10 @@ function routeWithQuery(path: string, query: string, selectedIds?: Set<string>)
 }
 
 /**
- * Phone-only floating compare action. Portals into the bottom search dock's
- * addon slot so it stays anchored just above the composer pill (and hides
- * with it on scroll), but renders as a self-contained floating pill so it
- * reads as a batch-selection action rather than composer chrome.
+ * Mobile/tablet floating compare action. Portals into the search composer's
+ * addon slot so it stays anchored beside the active result controls, but
+ * renders as a self-contained floating pill so it reads as a batch-selection
+ * action rather than composer chrome.
  */
 function DifferentialsMobileCompareBar({
  selectedCount,

src/components/clinical-dashboard/global-search-shell.tsx

@@ -45,7 +45,7 @@ import {
 } from "@/lib/app-modes";
 import { isLocalNoAuthMode } from "@/lib/client-env";
 import { documentsSearchHref } from "@/lib/document-flow-routes";
-import { modeHomeDesktopComposerSlotId } from "@/lib/mode-home-composer";
+import { differentialsMobileCompareAddonSlotId, modeHomeDesktopComposerSlotId } from "@/lib/mode-home-composer";
 import { readSearchNavigationContext, type SearchNavigationOptions } from "@/lib/search-navigation-context";
 import type { SearchScopeFilters } from "@/lib/search-scope";
 import { useAuthSession } from "@/lib/supabase/client";
@@ -241,6 +241,8 @@ function GlobalStandaloneSearchShellClient({
  const isDocumentSearchMockupRoute = pathname.startsWith("/mockups/document-search");
  const isDocumentCommandSearchView = pathname === "/documents/search" && requestedQuery.length > 0;
  const useCompactBottomSearch = hasSubmittedModeSearch || isDocumentCommandSearchView;
+ const differentialsCompareAddonActive =
+ pathname === "/differentials" && searchMode === "differentials" && hasSubmittedModeSearch;
  // Registry and local decision-support modes own their submitted-search views on their
  // standalone routes; the shell must not swap them to the dashboard. On the
  // home route the dashboard always renders, so these exclusions only apply
@@ -283,9 +285,11 @@ function GlobalStandaloneSearchShellClient({
  ? "2rem"
  : searchMode === "answer"
  ? "calc(9rem + env(safe-area-inset-bottom))"
- : useCompactBottomSearch
- ? "calc(5.5rem + env(safe-area-inset-bottom))"
- : "calc(9rem + env(safe-area-inset-bottom))";
+ : differentialsCompareAddonActive
+ ? "calc(8.75rem + env(safe-area-inset-bottom))"
+ : useCompactBottomSearch
+ ? "calc(5.5rem + env(safe-area-inset-bottom))"
+ : "calc(9rem + env(safe-area-inset-bottom))";
 
  useEffect(() => {
  // Re-derive the mode and query from the URL, but only when the search string
@@ -551,6 +555,9 @@ function GlobalStandaloneSearchShellClient({
  // result views: compact the phone bottom composer so results keep
  // maximum screen space. Mode homes keep the chip-row layout.
  mobileBottomSearchVariant={useCompactBottomSearch ? "compact" : "default"}
+ mobileBottomSearchAddonSlotId={
+ differentialsCompareAddonActive ? differentialsMobileCompareAddonSlotId : undefined
+ }
  desktopSearchPlacement={desktopSearchPlacement === "hero" && isStandaloneModeHome ? "hero" : "default"}
  searchComposerVisible={shouldShowSearchComposer}
  desktopHomeComposerSlotId={isStandaloneModeHome ? modeHomeDesktopComposerSlotId : undefined}

src/components/clinical-dashboard/master-search-header.tsx

@@ -235,7 +235,7 @@ export function MasterSearchHeader({
  * search pill sits in the middle of the hero on phones as well as desktop
  * instead of docking to the bottom edge. */
  desktopHomeComposerSlotId?: string;
- /** Phone-only slot rendered above the bottom search pill for page-specific dock addons. */
+ /** Mobile/tablet slot rendered above the search pill for page-specific composer addons. */
  mobileBottomSearchAddonSlotId?: string;
  mobileLeadingAction?: "menu" | "back";
  onMobileBack?: () => void;
@@ -321,7 +321,9 @@ export function MasterSearchHeader({
  searchComposerVisible &&
  !desktopHomeComposerSlotId &&
  (isAnswerFooterComposer || mobileSearchPlacement === "bottom");
- const bottomComposerScrollHiddenActive = Boolean(hideOnScroll && phoneBottomSearchDockActive);
+ const bottomComposerScrollHiddenActive = Boolean(
+ hideOnScroll && phoneBottomSearchDockActive && !mobileBottomSearchAddonSlotId,
+ );
  const bottomComposerHidden =
  bottomComposerScrollHiddenActive &&
  scrollHidden &&
@@ -1188,7 +1190,11 @@ export function MasterSearchHeader({
  const ModeIdentityIcon = appModeIcons[searchMode];
  const hasScopeFooterChip = searchMode === "answer" || searchMode === "documents" || searchMode === "forms";
  const usesPhoneFooterDock = usesBottomComposerPlacement && usesPhoneSearchLayout;
- const shouldHideBottomOnScroll = Boolean(hideOnScroll && usesPhoneFooterDock);
+ // A differential comparison is a persistent batch action: hiding its host
+ // dock on downward scroll makes the CTA slide under mobile browser chrome
+ // and disables pointer events just when users finish reviewing the list.
+ // Keep that dock pinned while the header can still collapse independently.
+ const shouldHideBottomOnScroll = Boolean(hideOnScroll && usesPhoneFooterDock && !mobileBottomSearchAddonSlotId);
  // Phone submitted non-answer result docks reserve pill-only scroll
  // clearance (ClinicalDashboard <main> margins / global-search-shell
  // mobileComposerReserve), so an extra notice line would push the fixed
@@ -1237,7 +1243,7 @@ export function MasterSearchHeader({
  )}
  >
  {usesBottomComposerPlacement ? <div className="answer-footer-search-backdrop" aria-hidden="true" /> : null}
- {usesPhoneFooterDock && mobileBottomSearchAddonSlotId ? (
+ {usesMobileBottomStyle && mobileBottomSearchAddonSlotId ? (
  <div
  id={mobileBottomSearchAddonSlotId}
  className="differentials-mobile-search-addon relative z-10 w-full empty:hidden"

src/lib/mode-home-composer.ts

@@ -1,4 +1,4 @@
 export const modeHomeDesktopComposerSlotId = "mode-home-desktop-composer-slot";
 
-/** Phone-only slot in the bottom search dock for differentials compare actions. */
+/** Mobile/tablet search-composer slot for differentials compare actions. */
 export const differentialsMobileCompareAddonSlotId = "differentials-mobile-compare-addon-slot";

tests/ui-tools.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test, type Locator, type Page } from "playwright/test";
 import type { Route } from "playwright-core";
-import { acuteConfusionPresentationWorkflow } from "../src/lib/differentials";
+import { acuteConfusionPresentationWorkflow, differentialRecords } from "../src/lib/differentials";
 import { demoAnswer, demoDocuments } from "../src/lib/demo-data";
 import { formRecords } from "../src/lib/forms";
 import { loadMedicationSnapshot } from "../src/lib/medication-snapshot";
@@ -138,6 +138,41 @@ async function mockAnswerDashboardApi(page: Page) {
  });
 }
 
+async function mockDifferentialCatalogApi(page: Page) {
+ await page.route(/\/api\/differentials(?:\?.*)?$/, async (route) => {
+ const url = new URL(route.request().url());
+ const query = url.searchParams.get("q")?.trim() ?? "";
+ const kind = url.searchParams.get("kind") ?? "diagnosis";
+
+ if (kind === "presentation") {
+ await route.fulfill({
+ json: {
+ matches: [
+ {
+ workflow: acuteConfusionPresentationWorkflow,
+ score: 1,
+ reasons: [`Matched ${query}`],
+ },
+ ],
+ demoMode: true,
+ },
+ });
+ return;
+ }
+
+ await route.fulfill({
+ json: {
+ matches: differentialRecords.slice(0, 20).map((record, index) => ({
+ record,
+ score: 1 - index / 10,
+ reasons: [`Matched ${query}`],
+ })),
+ demoMode: true,
+ },
+ });
+ });
+}
+
 async function commandSurfaceOpensAbovePill(page: Page) {
  const input = visibleGlobalSearchInput(page).first();
  await expect(input).toBeVisible();
@@ -1332,6 +1367,103 @@ test.describe("Clinical KB tools launcher", () => {
  await expectNoPageHorizontalOverflow(page);
  });
 
+ test("mobile differential compare action stays tappable while results scroll", async ({ page }) => {
+ await mockAnswerDashboardApi(page);
+ await mockDifferentialCatalogApi(page);
+ await page.route(/\/api\/search(?:\?.*)?$/, async (route) => {
+ await route.fulfill({
+ json: {
+ results: [],
+ visualEvidence: [],
+ relatedDocuments: [],
+ documentMatches: [
+ {
+ document_id: "11111111-1111-4111-8111-111111111111",
+ title: "Acute confusion differential guide",
+ file_name: "acute-confusion-differentials.pdf",
+ labels: [],
+ summarySnippet: "Reviewed acute confusion differential guidance.",
+ bestPages: [1],
+ bestChunkIds: ["chunk-acute-confusion"],
+ imageCount: 0,
+ tableCount: 0,
+ matchReason: "Matched indexed passage",
+ score: 0.93,
+ },
+ ],
+ relevance: { verdict: "strong", score: 0.93, directSourceCount: 1, weakSourceCount: 0 },
+ smartPanel: {},
+ telemetry: { query_class: "differential_compare", retrieval_strategy: "text_fast_path" },
+ scope: { queryMode: "compare_guidance" },
+ sourceGovernanceWarnings: [],
+ demoMode: true,
+ },
+ });
+ });
+ await page.setViewportSize({ width: 390, height: 844 });
+ await gotoLauncher(page, "/differentials");
+
+ const input = page.locator('input[placeholder="Ask or search a presentation"]:visible').first();
+ const submit = page.locator('button[aria-label="Search differential presentations"]:visible');
+ await input.fill("acute confusion");
+ await expect(submit).toBeEnabled();
+ await submit.click();
+
+ const compareAction = page.getByTestId("differentials-compare-selected-mobile");
+ const dock = page.locator("form.answer-footer-search-dock");
+ const scrollport = page.getByTestId("differentials-search-results");
+ const mainContent = page.locator("#main-content");
+ await expect(scrollport).toBeVisible();
+ await expect(page.locator("#differentials-mobile-compare-addon-slot")).toHaveCount(1);
+ await expect(compareAction).toBeVisible();
+ await expect(compareAction).toContainText("Compare selected");
+
+ await scrollport.evaluate((element) => element.scrollTo({ top: 700, behavior: "instant" }));
+ await expect.poll(() => scrollport.evaluate((element) => element.scrollTop)).toBeGreaterThan(100);
+ await page.waitForTimeout(300);
+
+ await expect(dock).not.toHaveAttribute("data-scroll-hidden", "true");
+ const mainPaddingBottom = await mainContent.evaluate((element) =>
+ Number.parseFloat(window.getComputedStyle(element).paddingBottom),
+ );
+ const dockHeight = await dock.evaluate((element) => element.getBoundingClientRect().height);
+ expect(mainPaddingBottom).toBeGreaterThanOrEqual(dockHeight);
+
+ await mainContent.evaluate((element) => element.scrollTo({ top: element.scrollHeight, behavior: "instant" }));
+ const lastResultBottom = await page
+ .getByTestId("differential-status-badge")
+ .last()
+ .evaluate(
+ (element) =>
+ element.closest("article")?.getBoundingClientRect().bottom ?? element.getBoundingClientRect().bottom,
+ );
+ const dockTop = await dock.evaluate((element) => element.getBoundingClientRect().top);
+ expect(lastResultBottom).toBeLessThanOrEqual(dockTop);
+
+ const compareGeometry = await compareAction.evaluate((element) => {
+ const rect = element.getBoundingClientRect();
+ const centreX = rect.left + rect.width / 2;
+ const centreY = rect.top + rect.height / 2;
+ const hit = document.elementFromPoint(centreX, centreY);
+ return {
+ top: rect.top,
+ bottom: rect.bottom,
+ viewportHeight: window.innerHeight,
+ receivesPointer: hit === element || element.contains(hit),
+ };
+ });
+ expect(compareGeometry.top).toBeGreaterThanOrEqual(0);
+ expect(compareGeometry.bottom).toBeLessThanOrEqual(compareGeometry.viewportHeight);
+ expect(compareGeometry.receivesPointer).toBe(true);
+
+ // The result cards and compare bar remain in their non-desktop layout up
+ // to 1023px, so the composer must keep providing the portal host on tablet.
+ await page.setViewportSize({ width: 768, height: 1024 });
+ await expect(page.locator("#differentials-mobile-compare-addon-slot")).toHaveCount(1);
+ await expect(compareAction).toBeVisible();
+ await expect(compareAction).toContainText("Compare selected");
+ });
+
  test("diagnosis detail actions stay tappable and tabs stay single-line", async ({ page }) => {
  await page.setViewportSize({ width: 1024, height: 800 });
  await gotoLauncher(page, "/differentials/diagnoses/delirium");