fix(ui): implement orientation adaptive design audit recommendations

src/components/AccessibleTable.tsx

@@ -99,7 +99,7 @@ function AccessibleTableMarkup({
     <div
       className={cn(
         "overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)]",
-        expanded && "max-h-[calc(100dvh-8.5rem)] rounded-none border-0 sm:rounded-lg sm:border",
+        expanded && "max-h-[calc(100dvh-8.5rem)] flex flex-col rounded-none border-0 sm:rounded-lg sm:border",
       )}
     >
       {caption && !(hidePreviewCaption && !expanded) ? (
@@ -112,7 +112,7 @@ function AccessibleTableMarkup({
           {caption}
         </div>
       ) : null}
-      <div className="overflow-x-auto">
+      <div className={cn("overflow-x-auto", expanded && "flex-1 min-h-0")}>
         <table
           aria-label={caption ?? undefined}
           className={cn(
@@ -460,7 +460,7 @@ export function AccessibleTable({
         contentClassName="sm:max-w-none"
         bodyClassName="py-3 pb-[max(1rem,env(safe-area-inset-bottom))] modal-landscape-container sm:p-3"
       >
-        <div>
+        <div className="flex flex-col h-full">
           {lowConfidence ? (
             <p data-testid="table-low-confidence-note" className={cn("mb-1 text-xs", textMuted)}>
               {showFallback

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

@@ -118,7 +118,9 @@ export function UtilityDrawer({
   sheetReturnFocusRef?: RefObject<HTMLElement | null>;
 }) {
   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 <details> (browser autoFocus) then remount into Sheet.
+  const [usesSheet, setUsesSheet] = useState(sheetBreakpoint === "all");
   const mobileTriggerRef = useRef<HTMLButtonElement>(null);
   const open = controlledOpen ?? uncontrolledOpen;
   const sheetTriggerClassName =

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)]",
         )}
       >

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<HTMLElement>('[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]",
                           ),
                     ),
               ),

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 ? (

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"',
     );

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)]"');
+  });
 });

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();