From e91fe83cc760088c7b678645c681201ecc515c38 Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Tue, 8 Sep 2026 06:51:03 +0800
Subject: [PATCH] Fill the phone screen in service mode and open it on the
 playing song

---
 frontend/app.js     | 13 +++++++++++-
 frontend/styles.css | 49 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/frontend/app.js b/frontend/app.js
index c1f9929..c240401 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -2246,7 +2246,18 @@ function updateServiceMode() {
 
 function enterServiceMode(pl) {
   if (pl && pl.videos && pl.videos.length) {
-    playFromList(pl.videos, 0, 'playlist:' + pl.id);
+    const source = 'playlist:' + pl.id;
+    const playingId = (current && current.meta) ? current.meta.id : null;
+    if (queueSource === source && playingId) {
+      // Already running this set — service mode is only a view, so keep the
+      // live queue, its position, shuffle order and playback exactly as they
+      // are instead of jumping back to the first song.
+    } else {
+      // Not on this set: open on the playing song if it happens to be in the
+      // playlist, otherwise start from the top.
+      const idx = playingId ? pl.videos.findIndex((v) => v && v.id === playingId) : -1;
+      playFromList(pl.videos, idx >= 0 ? idx : 0, source);
+    }
   }
   const el = $('serviceMode');
   if (el) el.classList.remove('hidden');
diff --git a/frontend/styles.css b/frontend/styles.css
index 2b2e62a..4ad078a 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -2769,6 +2769,55 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   transform: scale(0.95);
 }
 
+/* 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
+   width so the set list actually uses the screen. */
+@media (max-width: 640px) {
+  .service-mode {
+    padding: calc(env(safe-area-inset-top, 0px) + 14px)
+             calc(env(safe-area-inset-right, 0px) + 14px)
+             calc(env(safe-area-inset-bottom, 0px) + 18px)
+             calc(env(safe-area-inset-left, 0px) + 14px);
+  }
+  .service-center {
+    padding: 16px 0;
+  }
+  .service-title {
+    font-size: clamp(30px, 8.5vw, 44px);
+  }
+  .service-channel {
+    font-size: clamp(15px, 4.4vw, 20px);
+  }
+  .service-upnext {
+    margin-top: 18px;
+    font-size: clamp(14px, 4vw, 18px);
+  }
+  .service-note {
+    width: 100%;
+    max-width: none;
+    padding: 12px 14px;
+  }
+  .service-time {
+    font-size: clamp(16px, 4.6vw, 22px);
+  }
+  .service-controls {
+    width: 100%;
+    justify-content: space-evenly;
+    gap: 0;
+  }
+  .service-btn {
+    width: 64px;
+    height: 64px;
+    font-size: 24px;
+  }
+  .service-btn-play {
+    width: 84px;
+    height: 84px;
+    font-size: 34px;
+  }
+}
+
 @media (max-height: 520px) {
   .service-mode {
     padding: 12px 20px;