Fix mobile Answer edge dock hide and reveal

docs/search-chrome-behaviour.md

@@ -22,6 +22,8 @@ This repo uses one shared search experience across the global shell, dashboard r
 6. Header and footer chrome that share the same scroll signal should hide/reveal symmetrically: when hidden, underlying content must be visible to the viewport edge. Header hide/reveal is cross-breakpoint; the bottom search dock is phone-only. Read "Scroll hide/reveal" below before changing either.
 7. Do not add page-local dock-sized `pb-[calc(...safe-area...)]` under a shell-owned dock. Put clearance in the shared reserve or the page-owned composer, never both.
 8. `GlobalSearchShell` uses an inner `mobile-composer-reserve-pad` so phone padding contributes to scroll height; do not move phone shell clearance back to scrollport padding without a browser proof.
+9. Keep collapse-budget policy geometry-aware: an in-flow collapsing header needs enough remaining runway to absorb header + dock clearance, while a fixed overlay that only releases bottom reserve may hide when its post-collapse range retains the top reveal band plus deliberate hide intent _and_ the current offset already fits that post-collapse range (no material near-bottom clamp). Do not use synthetic page padding to make the stricter gate pass.
+10. Detect reserve-transition clamps from geometry, not a wider pixel tolerance: if the scroll range shrinks and the previous offset no longer fits inside the new maximum, rebase that frame as layout feedback. Once the range stabilizes, the same upward movement must reveal normally.
 
 ## Scroll hide/reveal
 

src/components/ClinicalDashboard.tsx

@@ -85,7 +85,8 @@ import {
 import { UniversalSearchAlsoMatches } from "@/components/clinical-dashboard/universal-search-also-matches";
 import { FavouritesGuestGate } from "@/components/clinical-dashboard/favourites-guest-gate";
 import { useDashboardShellActions } from "@/components/clinical-dashboard/use-dashboard-shell-actions";
-import { readChromeCollapseBudget, useScrollHideReporter } from "@/components/clinical-dashboard/use-hide-on-scroll";
+import { focusComposerInput as scheduleComposerFocus } from "@/components/clinical-dashboard/focus-composer-input";
+import { readChromeCollapseMetrics, useScrollHideReporter } from "@/components/clinical-dashboard/use-hide-on-scroll";
 import { SearchCommandProvider } from "@/components/clinical-dashboard/search-command-context";
 import {
   answerReferencesDocument,
@@ -354,6 +355,10 @@ export function ClinicalDashboard({
   const [modeSearchSubmitted, setModeSearchSubmitted] = useState(() =>
     Boolean(autoRunSearch && initialQuery.trim() && initialSearchMode !== "tools"),
   );
+  // focus=1 means "focus on entry", not "keep the dock focused after results".
+  // Suppress autofocus once a mode search/answer has been submitted so hide-on-
+  // scroll can reclaim chrome on result views (Answer and other bottom docks).
+  const shouldAutoFocusComposer = focusSearch && !modeSearchSubmitted;
   const [answer, setAnswer] = useState<RagAnswer | null>(null);
   const [sources, setSources] = useState<SearchResult[]>([]);
   // Answer-mode conversation thread. `priorAnswerTurns` holds completed
@@ -1495,11 +1500,14 @@ export function ClinicalDashboard({
   }, []);
 
   useEffect(() => {
-    if (!focusSearch) return undefined;
-    focusComposerInput();
-    const timeout = window.setTimeout(focusComposerInput, 500);
+    if (!shouldAutoFocusComposer) {
+      if (document.activeElement === composerInputRef.current) composerInputRef.current?.blur();
+      return undefined;
+    }
+    focusComposerInput(true);
+    const timeout = window.setTimeout(() => focusComposerInput(true), 500);
     return () => window.clearTimeout(timeout);
-  }, [focusSearch]);
+  }, [shouldAutoFocusComposer]);
 
   // Abort any in-flight answer/library search if the dashboard unmounts.
   useEffect(() => {
@@ -1536,7 +1544,7 @@ export function ClinicalDashboard({
       setLoading(false);
       setError(null);
       setAnswerProgress(null);
-      if (shouldFocusComposer) focusComposerInput();
+      if (shouldFocusComposer) focusComposerInput(true);
     });
     return () => window.cancelAnimationFrame(frame);
   }, [searchParams, clearDifferentialModeResultState]);
@@ -1555,8 +1563,9 @@ export function ClinicalDashboard({
       setSearchMode(targetMode);
       // run=1 URLs name the latest answered question; the composer stays empty
       // while an answer thread is active (including after localStorage restore).
+      // Do not reclaim focus on result deep-links — that pins phone chrome.
       if (searchText && params.get("run") !== "1") setQuery(searchText);
-      if (shouldFocusComposer) focusComposerInput();
+      if (shouldFocusComposer && params.get("run") !== "1") focusComposerInput(true);
     });
     return () => window.cancelAnimationFrame(frame);
   }, [clearDifferentialModeResultState]);
@@ -2611,11 +2620,8 @@ export function ClinicalDashboard({
     router.push(appModeHomeHref(mode, { queryMode, scopeFilters }));
   }
 
-  function focusComposerInput() {
-    window.requestAnimationFrame(() => {
-      composerInputRef.current?.focus({ preventScroll: true });
-      window.setTimeout(() => composerInputRef.current?.focus({ preventScroll: true }), 150);
-    });
+  function focusComposerInput(retainTarget = false) {
+    scheduleComposerFocus(composerInputRef, retainTarget);
   }
 
   function stageAnswerFollowUpDraft(draft: string) {
@@ -2804,7 +2810,7 @@ export function ClinicalDashboard({
         reportChromeScrollHideRef.current({
           offset: main.scrollTop,
           maxOffset: Math.max(0, main.scrollHeight - main.clientHeight),
-          collapseBudget: readChromeCollapseBudget(main),
+          ...readChromeCollapseMetrics(main),
           source: main,
         });
       });
@@ -3328,7 +3334,7 @@ export function ClinicalDashboard({
           }}
           queryModeOptions={clinicalQueryModeOptions}
           queryInputRef={composerInputRef}
-          queryInputAutoFocus={focusSearch}
+          queryInputAutoFocus={shouldAutoFocusComposer}
           recentQueries={recentQueries}
           commandScopes={commandScopes}
           onCommandScopesChange={setCommandScopes}
@@ -3350,8 +3356,7 @@ export function ClinicalDashboard({
           }
           desktopHomeComposerSlotId={desktopHomeComposerSlotId}
           // Mode homes keep the composer in the centred hero slot at every
-          // breakpoint so documents, therapy, and the other homes share the
-          // same phone/tablet structure instead of switching to a bottom dock.
+          // breakpoint; documents, therapy, and other homes share the phone/tablet structure.
           heroComposerBreakpoint={heroComposerBreakpoint}
           // Answer view: the header overlays the scrolling <main> at every width
           // (main reserves matching top padding) so content frosts under the

src/components/clinical-dashboard/focus-composer-input.ts

@@ -0,0 +1,16 @@
+import type { RefObject } from "react";
+
+/** Focus the dashboard composer, optionally pinning the element across remounts. */
+export function focusComposerInput(composerInputRef: RefObject<HTMLInputElement | null>, retainTarget = false) {
+  const requestedInput = retainTarget ? composerInputRef.current : null;
+  const focusBoundInput = () => {
+    const input = retainTarget ? requestedInput : composerInputRef.current;
+    if (input?.isConnected && composerInputRef.current === input) {
+      input.focus({ preventScroll: true });
+    }
+  };
+  window.requestAnimationFrame(() => {
+    focusBoundInput();
+    window.setTimeout(focusBoundInput, 150);
+  });
+}

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

@@ -32,7 +32,7 @@ import {
   resolveShellVisibleMobileComposerReserve,
 } from "@/components/clinical-dashboard/mobile-composer-reserve";
 import {
-  readChromeCollapseBudget,
+  readChromeCollapseMetrics,
   useDocumentScrollHideReporter,
   useScrollHideReporter,
 } from "@/components/clinical-dashboard/use-hide-on-scroll";
@@ -539,7 +539,7 @@ function GlobalStandaloneSearchShellClient({
     chromeScrollHide.reportScroll({
       offset: target.scrollTop,
       maxOffset: Math.max(0, target.scrollHeight - target.clientHeight),
-      collapseBudget: readChromeCollapseBudget(target),
+      ...readChromeCollapseMetrics(target),
       source: target,
     });
   }
@@ -564,7 +564,7 @@ function GlobalStandaloneSearchShellClient({
         maxOffset: Math.max(0, target.scrollHeight - target.clientHeight),
         // Collapsing chrome releases layout into nested scrollers too (their
         // flex height cap grows with the shell), so the same budget applies.
-        collapseBudget: readChromeCollapseBudget(main),
+        ...readChromeCollapseMetrics(main),
         source: target,
       });
     };

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

@@ -364,8 +364,6 @@ export function MasterSearchHeader({
     disabled: !hideOnScroll || hideOnScroll.scrollHidden !== undefined,
   });
   const scrollHidden = hideOnScroll?.scrollHidden !== undefined ? hideOnScroll.scrollHidden : internalScrollHidden;
-  const headerChromeHidden =
-    scrollHidden && !modeMenuOpen && !actionMenuOpen && !scopeOpen && !scopeSheetOpen && !headerChromeFocused;
   // Mode homes portal the composer into the hero slot. With "all" the hero owns
   // every width (the answer home keeps its in-flow pill on phones); "sm-up"
   // hero hosts hand phones the bottom dock instead.
@@ -375,17 +373,38 @@ export function MasterSearchHeader({
     searchComposerVisible &&
     !heroComposerOwnsPhones &&
     (isAnswerFooterComposer || mobileSearchPlacement === "bottom");
+  const hideOnScrollEnabled = Boolean(hideOnScroll);
+  // Focus-capture pins can survive dock teardown when React skips blur (portal
+  // swap, hero reclaim, breakpoint change). Ignore latched focus unless that
+  // surface is still the active hide/reveal owner, then clear the latch async
+  // (repo pattern — avoids react-hooks/set-state-in-effect).
+  const composerFocusPinsChrome = composerChromeFocused && phoneBottomSearchDockActive && hideOnScrollEnabled;
+  const headerFocusPinsChrome = headerChromeFocused && hideOnScrollEnabled;
+  // Header and composer share one scroll signal, so any active surface or
+  // focus inside either edge pins both edges. This preserves keyboard focus
+  // safety without letting the unfocused header disappear above a still-
+  // focused composer (or vice versa).
+  const sharedChromePinned =
+    modeMenuOpen ||
+    actionMenuOpen ||
+    commandDropdownOpen ||
+    scopeOpen ||
+    scopeSheetOpen ||
+    headerFocusPinsChrome ||
+    composerFocusPinsChrome;
+  const headerChromeHidden = scrollHidden && !sharedChromePinned;
   // Compare addon chrome lives inside the phone dock; hide/reveal with it so
   // the search pill and Compare selected bar reclaim space together.
   const bottomComposerScrollHiddenActive = Boolean(hideOnScroll && phoneBottomSearchDockActive);
-  const bottomComposerHidden =
-    bottomComposerScrollHiddenActive &&
-    scrollHidden &&
-    !actionMenuOpen &&
-    !commandDropdownOpen &&
-    !scopeOpen &&
-    !scopeSheetOpen &&
-    !composerChromeFocused;
+  const bottomComposerHidden = bottomComposerScrollHiddenActive && scrollHidden && !sharedChromePinned;
+
+  useEffect(() => {
+    if (phoneBottomSearchDockActive && hideOnScrollEnabled) return;
+    queueMicrotask(() => {
+      if (!phoneBottomSearchDockActive || !hideOnScrollEnabled) setComposerChromeFocused(false);
+      if (!hideOnScrollEnabled) setHeaderChromeFocused(false);
+    });
+  }, [phoneBottomSearchDockActive, hideOnScrollEnabled]);
 
   useEffect(() => {
     onBottomComposerHiddenChange?.(bottomComposerHidden);

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

@@ -14,7 +14,7 @@
  * zero so content can paint all the way to the viewport edge once the dock is
  * invisible. The rem number is exported separately so the scroll-hide
  * collapse budget
- * (use-hide-on-scroll's readChromeCollapseBudget) measures against the same
+ * (use-hide-on-scroll's readChromeCollapseMetrics) measures against the same
  * value; tests/mobile-composer-reserve.test.ts pins the pair together.
  */
 export const mobileComposerHiddenReserveRem = 0;