Skip to content

Fix the mobile controls sheet: a visible, reliable way out #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PouyanJay merged 1 commit into from
Jul 27, 2026
Merged

Fix the mobile controls sheet: a visible, reliable way out #45

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions src/lib/components/shell/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Loading