From 257999e464cbffe57abb88a239912ed54cdcc305 Mon Sep 17 00:00:00 2001
From: Pouyan Jahangiri <jahangiri.pouyan@gmail.com>
Date: Sun, 26 Jul 2026 17:43:45 -0700
Subject: [PATCH] Fix the mobile controls sheet: a visible, reliable way out

On a real phone the controls sheet used `88vh`, i.e. the LARGE viewport behind
Safari's toolbars, so it grew taller than the screen and its header - with the
close button - slid up behind the top bar. There was no visible way back to the
main view.

- Cap the sheet with `100dvh` minus the top bar, so it always sits below it.
- Pin the header (title + close) sticky to the top of the sheet.
- Phone close is a clear X (dismiss), not the docked panel's left chevron.
- Heavier scrim on a phone so the bench reads as dimmed-away, not a second UI
  showing through.
---
 src/lib/components/shell/Sidebar.svelte | 26 +++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/shell/Sidebar.svelte b/src/lib/components/shell/Sidebar.svelte
index f3c9dd9..009e90c 100644
--- a/src/lib/components/shell/Sidebar.svelte
+++ b/src/lib/components/shell/Sidebar.svelte
@@ -123,7 +123,9 @@
 					title={dismiss}
 					onclick={() => shell.toggle()}
 				>
-					<Icon name="chevron-left" size={15} />
+					<!-- A phone gets a clear close (X): the sheet dismisses, it does not "collapse left" the
+					     way the docked panel's chevron implies. -->
+					<Icon name={shell.narrow ? 'close' : 'chevron-left'} size={shell.narrow ? 18 : 15} />
 				</Button>
 			</header>
 
@@ -533,15 +535,35 @@
 			width: 100%;
 			max-width: 100%;
 			height: auto;
-			max-height: 88vh;
+			/* dvh, NOT vh, and capped to leave the top bar clear: with `vh` (the LARGE viewport, behind
+			   Safari's toolbars) the sheet grew taller than the screen and its top - with the "Controls"
+			   header and the close button - slid up behind the top bar, so there was no visible way out. */
+			max-height: calc(100dvh - var(--topbar-height) - var(--sp-8));
 			border-right: none;
 			border-top: 1px solid var(--line);
 			border-radius: var(--radius-modal) var(--radius-modal) 0 0;
 			animation: slide-in-up var(--dur-enter) var(--ease) both;
 		}
 
+		/* The header (title + close) stays pinned to the top of the sheet while its body scrolls, so the
+		   way out is always on screen. */
+		.overlay .panel > header {
+			position: sticky;
+			top: 0;
+			z-index: 1;
+			margin: 0;
+			padding-bottom: var(--sp-3);
+			background: var(--panel);
+		}
+
 		.overlay .panel {
 			padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-6));
 		}
+
+		/* A heavier scrim on a phone: the sheet is a full modal here, so the bench behind it reads as
+		   clearly dimmed-away rather than a second UI showing through. */
+		.scrim {
+			background: rgba(8, 10, 18, 0.72);
+		}
 	}
 </style>