From c6870c44f3051fad2efdff9cbdc954b1a540fa2d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 17:56:04 +0000
Subject: [PATCH] Fix black band under phone content when iOS Safari toolbar
 collapses

Size the fixed phone shell and fullscreen overlays from their inset-0
containers instead of 100dvh. iOS Safari re-resolves dvh lazily while its
bottom toolbar collapses/expands (especially with body scrolling
disabled), so the dvh-sized shell kept its stale shorter height and
clipped content, leaving a dead black band above the toolbar. Fixed
insets track the live viewport through the whole transition, so content
now fills the screen edge to edge.

Same dvh -> full swap applied to the fullscreen Sheet variant, the left
drawer, the settings dialog, and the fullscreen scope sheet, which shared
the identical hazard.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CkCda13HLjNhg7oDycmoSh
---
 .../clinical-dashboard/global-search-shell.tsx           | 9 +++++++--
 .../clinical-dashboard/master-search-header.tsx          | 2 +-
 src/components/clinical-dashboard/settings-dialog.tsx    | 2 +-
 src/components/ui/sheet.tsx                              | 7 +++++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/clinical-dashboard/global-search-shell.tsx b/src/components/clinical-dashboard/global-search-shell.tsx
index a3397ec2c..f566e9810 100644
--- a/src/components/clinical-dashboard/global-search-shell.tsx
+++ b/src/components/clinical-dashboard/global-search-shell.tsx
@@ -476,7 +476,12 @@ function GlobalStandaloneSearchShellClient({
   return (
     <div
       className={cn(
-        "min-h-dvh max-sm:fixed max-sm:inset-0 max-sm:h-dvh max-sm:overflow-hidden bg-[color:var(--background)] text-[color:var(--text)]",
+        // Phone shell height comes from inset-0 alone, never 100dvh: iOS Safari
+        // re-resolves dvh lazily when its toolbar collapses/expands (especially
+        // with body scrolling disabled like here), leaving a dead band between
+        // the clipped shell and the toolbar. Fixed insets track the live
+        // viewport through the whole transition, so content stays edge to edge.
+        "sm:min-h-dvh max-sm:fixed max-sm:inset-0 max-sm:overflow-hidden bg-[color:var(--background)] text-[color:var(--text)]",
         shouldShowDesktopSidebar && "md:grid md:grid-cols-[5.25rem_minmax(0,1fr)]",
         shouldShowDesktopSidebar &&
           "motion-safe:transition-[grid-template-columns] motion-safe:duration-200 motion-safe:ease-out",
@@ -514,7 +519,7 @@ function GlobalStandaloneSearchShellClient({
         </div>
       ) : null}
 
-      <div className="flex min-h-dvh min-w-0 flex-col max-sm:h-dvh max-sm:min-h-0 max-sm:overflow-hidden">
+      <div className="flex min-w-0 flex-col max-sm:h-full max-sm:min-h-0 max-sm:overflow-hidden sm:min-h-dvh">
         <div className={mobileChromeVisible ? undefined : "hidden lg:block"}>
           <MasterSearchHeader
             documents={[]}
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 04ef4a475..8514cdb8a 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -1438,7 +1438,7 @@ export function MasterSearchHeader({
           closeButtonClassName="grid h-11 w-11 shrink-0 place-items-center rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
           contentClassName={cn(
             "bg-[color:var(--surface-lux)]",
-            scopeSheetFullscreen ? "max-h-dvh" : "max-h-[min(84dvh,42rem)]",
+            scopeSheetFullscreen ? "max-h-full" : "max-h-[min(84dvh,42rem)]",
             "sm:max-h-[min(88dvh,44rem)] sm:max-w-xl",
           )}
           bodyClassName={cn(
diff --git a/src/components/clinical-dashboard/settings-dialog.tsx b/src/components/clinical-dashboard/settings-dialog.tsx
index 2aaf0dee6..1a2cb79f1 100644
--- a/src/components/clinical-dashboard/settings-dialog.tsx
+++ b/src/components/clinical-dashboard/settings-dialog.tsx
@@ -154,7 +154,7 @@ export function SettingsDialog({
       contentClassName="w-full max-w-none border-[color:var(--border-lux)] bg-[color:var(--background)] font-sans shadow-none lg:max-w-[900px] lg:bg-[color:var(--surface-lux)] lg:shadow-[var(--shadow-lux)]"
       bodyClassName="p-0"
     >
-      <div className="relative grid h-dvh max-h-dvh min-h-0 overflow-hidden lg:h-auto lg:max-h-[min(86dvh,820px)] lg:grid-cols-[250px_minmax(0,1fr)]">
+      <div className="relative grid h-full max-h-full min-h-0 overflow-hidden lg:h-auto lg:max-h-[min(86dvh,820px)] lg:grid-cols-[250px_minmax(0,1fr)]">
         {closeButton}
         <aside className="hidden border-r border-[color:var(--border-lux)] bg-[color:var(--surface)]/72 px-4 pb-5 pt-16 lg:flex lg:flex-col">
           <nav aria-label="Settings sections" className="grid gap-1.5">
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 9b1b67562..b8d2515c9 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -226,10 +226,13 @@ export function Sheet({
           "flex min-w-0 w-full flex-col overflow-hidden border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text)] shadow-[var(--shadow-elevated)] pb-safe",
           "transition duration-200 motion-reduce:transition-none sm:duration-150",
           placement === "left"
-            ? "h-full max-h-dvh max-w-[min(22rem,calc(100vw-1rem))] rounded-r-2xl border-y-0 border-l-0 pt-safe sm:max-h-dvh sm:max-w-[22rem] sm:rounded-l-none sm:rounded-r-2xl sm:pb-0"
+            ? "h-full max-h-full max-w-[min(22rem,calc(100vw-1rem))] rounded-r-2xl border-y-0 border-l-0 pt-safe sm:max-h-dvh sm:max-w-[22rem] sm:rounded-l-none sm:rounded-r-2xl sm:pb-0"
             : cn(
                 defaultSheetIsFullscreen
-                  ? "h-dvh max-h-dvh rounded-none border-0 motion-safe:animate-pop-in sm:max-w-none sm:rounded-none lg:h-auto lg:max-h-[calc(100dvh-3rem)] lg:rounded-2xl lg:border lg:border-[color:var(--border-lux)] lg:pb-0 lg:motion-safe:animate-dialog-rise"
+                  ? // Fullscreen panels size from the inset-0 backdrop (h-full), not
+                    // 100dvh: iOS Safari resolves dvh stale across toolbar
+                    // collapse, which strands a dead band under the sheet.
+                    "h-full max-h-full rounded-none border-0 motion-safe:animate-pop-in sm:max-w-none sm:rounded-none lg:h-auto lg:max-h-[calc(100dvh-3rem)] lg:rounded-2xl lg:border lg:border-[color:var(--border-lux)] lg:pb-0 lg:motion-safe:animate-dialog-rise"
                   : cn(
                       "sm:max-w-lg sm:rounded-2xl sm:pb-0 sm:motion-safe:animate-dialog-rise",
                       defaultSheetIsTopAligned