{lowConfidence ? (
{showFallback
diff --git a/src/components/clinical-dashboard/dashboard-shell.tsx b/src/components/clinical-dashboard/dashboard-shell.tsx
index 9a2cd0db1..6760d1765 100644
--- a/src/components/clinical-dashboard/dashboard-shell.tsx
+++ b/src/components/clinical-dashboard/dashboard-shell.tsx
@@ -118,7 +118,9 @@ export function UtilityDrawer({
sheetReturnFocusRef?: RefObject;
}) {
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
- const [usesSheet, setUsesSheet] = useState(false);
+ // `all` always matches; default true so the first open does not mount drawer
+ // children in the hidden (browser autoFocus) then remount into Sheet.
+ const [usesSheet, setUsesSheet] = useState(sheetBreakpoint === "all");
const mobileTriggerRef = useRef(null);
const open = controlledOpen ?? uncontrolledOpen;
const sheetTriggerClassName =
diff --git a/src/components/clinical-dashboard/universal-search-command-surface.tsx b/src/components/clinical-dashboard/universal-search-command-surface.tsx
index 08b27a559..d57a66195 100644
--- a/src/components/clinical-dashboard/universal-search-command-surface.tsx
+++ b/src/components/clinical-dashboard/universal-search-command-surface.tsx
@@ -256,7 +256,7 @@ function CommandDropdown({
role="listbox"
aria-label={`${mode.label} search suggestions`}
className={cn(
- "max-h-[min(55dvh,26rem)] overflow-y-auto overscroll-contain p-2",
+ "max-h-[calc(100dvh-5rem)] overflow-y-auto overscroll-contain p-2",
opensUpward ? "sm:max-h-[min(38dvh,20rem)]" : "sm:max-h-[min(42dvh,24rem)]",
)}
>
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index eeb1ea499..c4a0ea333 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -120,9 +120,14 @@ export function Sheet({
// Pending focus-restore timers from the previous close. Cleared on the next
// open and on unmount so a torn-down jsdom environment cannot throw from a
// stale 50ms retry under Vitest coverage workers.
- const restoreTimersRef = useRef<{ frame: number | null; timeout: number | null }>({
+ const restoreTimersRef = useRef<{
+ frame: number | null;
+ timeout: number | null;
+ openFocusRetry: number | null;
+ }>({
frame: null,
timeout: null,
+ openFocusRetry: null,
});
const unmountingRef = useRef(false);
const titleId = useId();
@@ -146,6 +151,10 @@ export function Sheet({
window.clearTimeout(restoreTimers.timeout);
restoreTimers.timeout = null;
}
+ if (restoreTimers.openFocusRetry != null) {
+ window.clearInterval(restoreTimers.openFocusRetry);
+ restoreTimers.openFocusRetry = null;
+ }
};
}, []);
@@ -188,13 +197,54 @@ export function Sheet({
const explicitReturnElement = returnFocusRef?.current ?? null;
const previousActiveElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+ const restoreTimers = restoreTimersRef.current;
+ if (restoreTimers.openFocusRetry != null) {
+ window.clearInterval(restoreTimers.openFocusRetry);
+ restoreTimers.openFocusRetry = null;
+ }
pushSheet(sheetId);
const focusFrame = window.requestAnimationFrame(() => {
- const focusTarget =
+ const resolveFocusTarget = () =>
initialFocusRef?.current ??
panelRef.current?.querySelector('[data-sheet-autofocus="true"]') ??
closeRef.current;
- focusTarget?.focus({ preventScroll: true });
+ const focusIfNeeded = () => {
+ // Never reclaim focus once a newer Sheet is stacked above this one.
+ if (!isTopmostSheet(sheetId)) return null;
+ const focusTarget = resolveFocusTarget();
+ if (!focusTarget?.isConnected) return null;
+ if (document.activeElement === focusTarget) return focusTarget;
+ // Reclaim when focus is outside the panel (or still on body after a
+ // remount). Do not steal from another in-panel control the user tabbed to.
+ const active = document.activeElement;
+ if (
+ active == null ||
+ active === document.body ||
+ (panelRef.current != null && !panelRef.current.contains(active))
+ ) {
+ focusTarget.focus({ preventScroll: true });
+ }
+ return focusTarget;
+ };
+ focusIfNeeded();
+ // Retries cover sibling-sheet teardown and late-mounted autofocus inputs
+ // (UtilityDrawer media sync / deferred drawer children).
+ let attempts = 0;
+ const retryTimer = window.setInterval(() => {
+ attempts += 1;
+ const focusTarget = focusIfNeeded();
+ if (
+ attempts >= 8 ||
+ !isTopmostSheet(sheetId) ||
+ (focusTarget != null && document.activeElement === focusTarget)
+ ) {
+ window.clearInterval(retryTimer);
+ if (restoreTimers.openFocusRetry === retryTimer) {
+ restoreTimers.openFocusRetry = null;
+ }
+ }
+ }, 50);
+ restoreTimers.openFocusRetry = retryTimer;
});
function onKeyDown(event: KeyboardEvent) {
@@ -235,7 +285,6 @@ export function Sheet({
}
window.addEventListener("keydown", onKeyDown);
- const restoreTimers = restoreTimersRef.current;
return () => {
window.cancelAnimationFrame(focusFrame);
window.removeEventListener("keydown", onKeyDown);
@@ -247,6 +296,10 @@ export function Sheet({
if (restoreTimers.timeout != null) {
window.clearTimeout(restoreTimers.timeout);
}
+ if (restoreTimers.openFocusRetry != null) {
+ window.clearInterval(restoreTimers.openFocusRetry);
+ restoreTimers.openFocusRetry = null;
+ }
if (unmountingRef.current) return;
// Focus restore is best-effort. Under Vitest coverage workers the jsdom
// `document` can be torn down before this rAF/setTimeout pair fires; bare
@@ -259,7 +312,14 @@ export function Sheet({
restoreTimers.timeout = window.setTimeout(() => {
restoreTimers.timeout = null;
if (typeof document === "undefined") return;
- if (!restoreTarget.isConnected || document.activeElement === restoreTarget) {
+ // Only retry when focus fell through to the document body. If another
+ // surface (e.g. a Guide dialog opened from a phone menu sheet) already
+ // took focus, do not steal it back.
+ if (
+ !restoreTarget.isConnected ||
+ document.activeElement === restoreTarget ||
+ (document.activeElement !== document.body && document.activeElement != null)
+ ) {
return;
}
restoreTarget.focus({ preventScroll: true });
@@ -335,7 +395,12 @@ export function Sheet({
"rounded-t-2xl motion-safe:animate-sheet-up",
defaultSheetUsesViewportSize
? "min-h-[calc(100dvh-2rem)] max-h-[calc(100dvh-1rem)] sm:min-h-0"
- : "max-h-[88dvh]",
+ : // Skip a default max-h when the caller already caps height via
+ // contentClassName — cn() does not last-win Tailwind utilities,
+ // so two unprefixed max-h-* classes race in CSS source order.
+ /\bmax-h-/.test(contentClassName ?? "")
+ ? undefined
+ : "max-h-[calc(100dvh-2rem)] sm:max-h-[88dvh]",
),
),
),
diff --git a/src/components/universal-search-command-mockups.tsx b/src/components/universal-search-command-mockups.tsx
index 37df17229..8e569912e 100644
--- a/src/components/universal-search-command-mockups.tsx
+++ b/src/components/universal-search-command-mockups.tsx
@@ -611,7 +611,7 @@ function SmartDropdown({
id={listboxId}
role="listbox"
aria-label={`${mode.label} search suggestions`}
- className="max-h-[26rem] overflow-y-auto p-2"
+ className="max-h-[calc(100dvh-5rem)] sm:max-h-[26rem] overflow-y-auto p-2"
>
{sections.map((section) =>
section.items.length ? (
diff --git a/tests/clinical-dashboard-merge-artifacts.test.ts b/tests/clinical-dashboard-merge-artifacts.test.ts
index 18d705d99..a17d2f8da 100644
--- a/tests/clinical-dashboard-merge-artifacts.test.ts
+++ b/tests/clinical-dashboard-merge-artifacts.test.ts
@@ -147,6 +147,7 @@ describe("ClinicalDashboard merge-artifact guards", () => {
expect(clinicalDashboardSource).toContain("resolveMobileComposerReserve(");
expect(clinicalDashboardSource).toContain('from "@/components/clinical-dashboard/mobile-composer-reserve"');
expect(clinicalDashboardSource).not.toContain('bottomComposerHidden ? "max(0.75rem, env(safe-area-inset-bottom))"');
+ expect(clinicalDashboardSource).not.toMatch(/pb-\[max\([^"']*safe-area-inset-bottom/);
expect(clinicalDashboardSource).toContain(
'"max-sm:pb-[var(--mobile-composer-reserve)] max-sm:[scroll-padding-bottom:var(--mobile-composer-reserve)] sm:mb-24"',
);
diff --git a/tests/search-command-surface.test.ts b/tests/search-command-surface.test.ts
index acf7b99d2..cda6f996e 100644
--- a/tests/search-command-surface.test.ts
+++ b/tests/search-command-surface.test.ts
@@ -1,4 +1,5 @@
import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
import {
commandDropdownCanDisplay,
@@ -139,4 +140,14 @@ describe("search command surface", () => {
expect(differentialRedFlagTerms).toContain("confusion");
expect(differentialRedFlagTerms.length).toBeGreaterThan(3);
});
+
+ it("keeps one sm max-height cap per command dropdown placement", () => {
+ const source = readFileSync(
+ new URL("../src/components/clinical-dashboard/universal-search-command-surface.tsx", import.meta.url),
+ "utf8",
+ );
+
+ expect(source).not.toContain("sm:max-h-[min(55dvh,26rem)]");
+ expect(source).toContain('opensUpward ? "sm:max-h-[min(38dvh,20rem)]" : "sm:max-h-[min(42dvh,24rem)]"');
+ });
});
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index e9b83c715..f8962ecf8 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -3120,7 +3120,11 @@ test.describe("Clinical KB UI smoke coverage", () => {
await expect(page.locator("details#dashboard-documents-drawer")).not.toHaveAttribute("open", "");
await page.keyboard.press("Escape");
await expect(resultsLibraryDialog).toHaveCount(0);
- await expect.poll(async () => openSourcesButton.evaluate((el) => el === document.activeElement)).toBe(true);
+ await expect
+ .poll(async () => openSourcesButton.evaluate((el) => el === document.activeElement), {
+ timeout: 15_000,
+ })
+ .toBe(true);
await page.reload({ waitUntil: "domcontentloaded" });
await expect(documentResults).toBeVisible();
@@ -3984,10 +3988,11 @@ test.describe("Clinical KB UI smoke coverage", () => {
await gotoApp(page, "/");
const dialog = await openGuide(page);
+ await expect.poll(async () => dialog.evaluate((element) => element.contains(document.activeElement))).toBe(true);
await page.keyboard.press("Shift+Tab");
- expect(await dialog.evaluate((element) => element.contains(document.activeElement))).toBe(true);
+ await expect.poll(async () => dialog.evaluate((element) => element.contains(document.activeElement))).toBe(true);
await page.keyboard.press("Tab");
- expect(await dialog.evaluate((element) => element.contains(document.activeElement))).toBe(true);
+ await expect.poll(async () => dialog.evaluate((element) => element.contains(document.activeElement))).toBe(true);
await dialog.getByRole("button", { name: "Close guide" }).click();
await expect(dialog).toBeHidden();