fix(answer): clear mobile footer overlap for table expansion

src/components/AccessibleTable.tsx

@@ -414,7 +414,7 @@ export function AccessibleTable({
 
   function openDialog(trigger: HTMLElement) {
     if (!canExpand) return;
-    trigger.scrollIntoView({ block: "center", inline: "nearest" });
+    trigger.scrollIntoView({ block: "nearest", inline: "nearest" });
     restoreFocusRef.current = trigger;
     setOpen(true);
   }
@@ -458,7 +458,7 @@ export function AccessibleTable({
               event.stopPropagation();
               openDialog(event.currentTarget);
             }}
-            className="relative z-50 mt-2 inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] px-3 text-xs font-semibold text-[color:var(--text)] shadow-[var(--shadow-tight)] transition hover:border-[color:var(--border-strong)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--focus)]/25"
+            className="relative z-50 mt-2 inline-flex min-h-11 w-full items-center justify-center gap-2 scroll-mb-[calc(18rem+env(safe-area-inset-bottom))] rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] px-3 text-xs font-semibold text-[color:var(--text)] shadow-[var(--shadow-tight)] transition hover:border-[color:var(--border-strong)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--focus)]/25"
           >
             <span>Expand table</span>
             <Maximize2 className="h-4 w-4" />

src/components/ClinicalDashboard.tsx

@@ -38,8 +38,8 @@
   primaryControl,
   textMuted,
   toneInfo,
   toneSuccess,
   toneWarning,
 } from "@/components/ui-primitives";
 import { useAuthSession } from "@/lib/supabase/client";
 import { AccountSetupDialog } from "@/components/clinical-dashboard/account-setup-dialog";
@@ -3170,7 +3170,9 @@
                   // bottomSearchScrollHidden only ever goes true on phones.)
                   bottomSearchScrollHidden
                   ? "mb-0 sm:mb-24"
-                  : "mb-[calc(5.25rem+env(safe-area-inset-bottom))] sm:mb-24"
+                  : answerFollowUpSuggestions.length > 0
+                    ? "mb-[calc(18rem+env(safe-area-inset-bottom))] sm:mb-24"
+                    : "mb-[calc(5.25rem+env(safe-area-inset-bottom))] sm:mb-24"
               : hasMobileBottomSearch
                 ? bottomSearchScrollHidden
                   ? "mb-0 sm:mb-0"

tests/ui-smoke.spec.ts

@@ -572,26 +572,33 @@ async function scrollMobileTableExpandClearOfFooter(page: Page, clinicalTable: L
   await clinicalTable.scrollIntoViewIfNeeded();
   await page.evaluate(() => {
     const expand = document.querySelector('[data-testid="table-expand-button"]');
-    const main = document.querySelector("main");
+    const scrollContainer = document.querySelector("main#main-content");
     const footer = document.querySelector(
       ".answer-footer-search-dock, .dashboard-composer-edge.answer-footer-search-edge",
     );
-    if (!expand || !main) return;
-    const expandRect = expand.getBoundingClientRect();
-    const footerTop = footer?.getBoundingClientRect().top ?? window.innerHeight;
-    const overlap = expandRect.bottom - footerTop + 20;
-    if (overlap > 0) {
-      main.scrollTop += overlap;
+    if (!expand || !scrollContainer) return;
+    for (let attempt = 0; attempt < 6; attempt += 1) {
+      const expandRect = expand.getBoundingClientRect();
+      const footerTop = footer?.getBoundingClientRect().top ?? window.innerHeight;
+      const currentOverlap = expandRect.bottom - footerTop + 24;
+      if (currentOverlap <= 0) break;
+      scrollContainer.scrollTop += currentOverlap;
     }
   });
 }
 
 async function openMobileTableFullscreen(page: Page, clinicalTable: Locator) {
   await scrollMobileTableExpandClearOfFooter(page, clinicalTable);
+  const expandButton = clinicalTable.getByTestId("table-expand-button");
   const tableSurface = clinicalTable.getByTestId("accessible-table-surface");
   const tableDialog = page.getByTestId("table-fullscreen-dialog");
   await expect(async () => {
-    await tableSurface.click({ force: true });
+    if (await tableDialog.isVisible().catch(() => false)) return;
+    if (await expandButton.isVisible().catch(() => false)) {
+      await expandButton.click();
+    } else {
+      await tableSurface.click();
+    }
     await expect(tableDialog).toBeVisible({ timeout: 2_000 });
   }).toPass({ timeout: 15_000 });
   return tableDialog;
@@ -1205,10 +1212,14 @@ test.describe("Clinical KB UI smoke coverage", () => {
     await expectNoPageHorizontalOverflow(page);
     await page.keyboard.press("Escape");
     await expect(tableDialog).toBeHidden();
-    await expect(clinicalTable.getByTestId("accessible-table-surface")).toBeFocused();
+    if (await tableExpandButton.isVisible().catch(() => false)) {
+      await expect(tableExpandButton).toBeFocused();
+    } else {
+      await expect(clinicalTable.getByTestId("accessible-table-surface")).toBeFocused();
+    }
     if (await tableExpandButton.isVisible().catch(() => false)) {
       await scrollMobileTableExpandClearOfFooter(page, clinicalTable);
-      await tableExpandButton.click({ force: true });
+      await tableExpandButton.click();
       await expect(tableDialog).toBeVisible();
       await tableDialog.getByRole("button", { name: "Close full-screen table" }).click();
       await expect(tableDialog).toBeHidden();
@@ -1799,7 +1810,7 @@ test.describe("Clinical KB UI smoke coverage", () => {
 
       await expect(expandButton).toBeVisible();
       await scrollMobileTableExpandClearOfFooter(page, clinicalTable);
-      await expandButton.click({ force: true });
+      await expandButton.click();
       const dialog = page.getByTestId("table-fullscreen-dialog");
       await expect(dialog).toBeVisible();
       await expect(dialog.getByRole("table")).toBeVisible();