josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep service mode full-bleed on iOS and hide the player chrome behind it

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-08 11:55:15 +08:00
parent 765a00b412
commit 9366b1749c
2 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/styles.css
View File

@@ -2540,14 +2540,20 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
/* ===================== Service Mode (Set-List View) ===================== */
.service-mode {
/* Sized by inset alone — deliberately NOT `width: 100vw`. On iOS a fixed
element that reaches past the viewport (the off-canvas .sidebar, which
escapes body's overflow:hidden) makes Safari widen the layout viewport and
shrink-to-fit the page, but vw units keep resolving against the ORIGINAL
width. A 100vw overlay then covers only ~90% of the screen and the app
shows through on the right. left/right:0 resolve against the widened
containing block, so the overlay stays full-bleed either way. */
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100dvh;
background: var(--bg);
color: var(--text);
z-index: 110;
/* Above .bottom-nav (310) and .mini-bar (300); modals (400) still win. */
z-index: 320;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -2769,6 +2775,18 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
transform: scale(0.95);
}
/* While the set-list overlay is up it owns the screen: the mini now-playing
bar and the bottom nav duplicate controls service mode already shows, and
both sit above it in the stacking order. The off-canvas sidebar is dropped
too so no fixed element reaches past the viewport to trigger the iOS
layout-viewport widening described on .service-mode. */
body.service-open .mini-bar,
body.service-open .bottom-nav,
body.service-open .sidebar,
body.service-open .sidebar-backdrop {
display: none;
}
/* Phones — the flat 28px gutters left a narrow centred column on a 390px
screen, so service mode never looked full-bleed in the iOS PWA. Pull the
gutters in to the safe-area edge and scale type/controls off the viewport