From 9366b1749c221e3e7b29a8921c1f915947a9d2df Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Tue, 8 Sep 2026 11:55:15 +0800
Subject: [PATCH] Keep service mode full-bleed on iOS and hide the player
 chrome behind it

---
 frontend/app.js     |  4 ++++
 frontend/styles.css | 26 ++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index c240401..a38a2fb 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -2261,6 +2261,9 @@ function enterServiceMode(pl) {
   }
   const el = $('serviceMode');
   if (el) el.classList.remove('hidden');
+  // Hides the mini-bar / bottom-nav / sidebar for as long as the overlay is up
+  // (see .service-open in styles.css).
+  document.body.classList.add('service-open');
   updateServiceMode();
   acquireWakeLock();
 }
@@ -2268,6 +2271,7 @@ function enterServiceMode(pl) {
 function exitServiceMode() {
   const el = $('serviceMode');
   if (el) el.classList.add('hidden');
+  document.body.classList.remove('service-open');
   releaseWakeLock();
 }
 
diff --git a/frontend/styles.css b/frontend/styles.css
index 4ad078a..674ee25 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -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