Fill the phone screen in service mode and open it on the playing song

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;