From 2b195d3b6bba324a98e676ec287955f1197bca4d Mon Sep 17 00:00:00 2001
From: Claude Worker <claude-worker@claudequeue>
Date: Tue, 30 Jun 2026 20:44:28 +0000
Subject: [PATCH] feat: add topbar adjustments for notch devices on pwa

Task #47 completed by ClaudeQueue

ClaudeQueue
---
 frontend/styles.css | 39 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/styles.css b/frontend/styles.css
index 06f04ab..ebb15d6 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1739,11 +1739,19 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   .app.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }
 
   /* --- Topbar: full-width, padded for status-bar notch ------------------- */
+  /* Width 100% ensures the topbar background fills behind the notch/status
+     bar area so its colour (the gradient) extends edge-to-edge. */
   .topbar {
-    padding-top: calc(12px + env(safe-area-inset-top));
-    padding-left: calc(14px + env(safe-area-inset-left));
-    padding-right: calc(14px + env(safe-area-inset-right));
+    width: 100%;
+    /* iOS < 11.2 fallback — constant() was the predecessor to env() */
+    padding-top: calc(12px + constant(safe-area-inset-top, 0px));
+    padding-left: calc(14px + constant(safe-area-inset-left, 0px));
+    padding-right: calc(14px + constant(safe-area-inset-right, 0px));
     padding-bottom: 12px;
+    /* Modern browsers: env() overrides the constant() lines above */
+    padding-top: calc(12px + env(safe-area-inset-top, 0px));
+    padding-left: calc(14px + env(safe-area-inset-left, 0px));
+    padding-right: calc(14px + env(safe-area-inset-right, 0px));
     position: sticky;
     top: 0;
     z-index: 50;
@@ -1889,3 +1897,28 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 .portrait-pwa .player-pane {
   /* Player pane is always visible at top; no snap needed. */
 }
+
+/* ============================================================================
+ * LANDSCAPE PWA — activates in standalone (installed) mode + landscape
+ *
+ * In landscape, the notch (if present) sits on one of the horizontal edges.
+ * We apply safe-area-inset-* to the topbar so its content never slides under
+ * the notch or the status-bar area, and ensure the topbar background spans
+ * the full screen width so the theme colour fills the notch region.
+ * ========================================================================== */
+@media (display-mode: standalone) and (orientation: landscape) {
+  /* Topbar: full width + safe-area padding on all sides.
+     constant() for iOS < 11.2; env() for all modern browsers (overrides above). */
+  .topbar {
+    width: 100%;
+    /* iOS < 11.2 fallback */
+    padding-top: calc(8px + constant(safe-area-inset-top, 0px));
+    padding-left: calc(14px + constant(safe-area-inset-left, 0px));
+    padding-right: calc(14px + constant(safe-area-inset-right, 0px));
+    padding-bottom: 8px;
+    /* Modern browsers */
+    padding-top: calc(8px + env(safe-area-inset-top, 0px));
+    padding-left: calc(14px + env(safe-area-inset-left, 0px));
+    padding-right: calc(14px + env(safe-area-inset-right, 0px));
+  }
+}