From 7b11ebdd59008d9427d70bacfae51ca356643dec Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Sun, 7 Jun 2026 17:03:05 -0500
Subject: [PATCH] pm-mobile: logo + header icons are a full-width top bar in
 both orientations

Unwrap the #topctl grouping so #brandrow (logo + share/help/theme/fullscreen)
is always its own full-width row at the very top. In landscape it spans the
full width on its own line (flex 1 1 100%) while volume + the pickers share the
line below, instead of being squeezed into a side column.

Controls help now highlights the union of the brand bar + volume row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 mobile.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/mobile.html b/mobile.html
index eecfebd..6bf1bca 100644
--- a/mobile.html
+++ b/mobile.html
@@ -60,9 +60,10 @@
   @media (display-mode:standalone){ #app{ --pad:26px; padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); } }
 
   /* ---- top ---- */
+  /* the logo + header-icon row is always a full-width bar at the very top, in
+     both orientations — it never joins the side-by-side landscape header flow */
   #top{ flex:0 0 auto; display:flex; flex-direction:column; gap:11px; }
-  #topctl{ display:flex; flex-direction:column; gap:11px; }
-  #brandrow{ display:flex; align-items:center; gap:10px; }
+  #brandrow{ flex:0 0 auto; display:flex; align-items:center; gap:10px; width:100%; }
   #logoLink{ display:inline-flex; opacity:.9; }
   .brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; }
   .hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; }
@@ -200,7 +201,8 @@
   @media (orientation:landscape){
     #app{ --maxw:1060px; }
     #top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; }
-    #topctl{ flex:1 1 320px; gap:8px; }
+    #brandrow{ flex:1 1 100%; }
+    #top .vol{ flex:1 1 220px; width:auto; min-width:0; }
     #top .sels{ flex:2 1 320px; min-width:0; }
     #mid{ display:grid; align-items:stretch; gap:8px 4vw; padding-top:0;
       grid-template-columns:40% 60%; grid-template-rows:auto 1fr auto;
@@ -264,18 +266,16 @@
 
 <div id="app">
   <div id="top">
-    <div id="topctl">
-      <div id="brandrow">
-        <a id="logoLink" href="https://codeberg.org/VARASYS/metronome" target="_blank" rel="noopener" title="VARASYS PolyMeter — source on Codeberg"><img class="brandlogo logo-dark" src="data:image/png;base64,@BUILD:logo-side-dark@" alt="VARASYS PolyMeter" /><img class="brandlogo logo-light" src="data:image/png;base64,@BUILD:logo-side-light@" alt="VARASYS PolyMeter" /></a>
-        <div class="hicons" id="utilrow">
-          <div class="icon" id="shareBtn" title="Share / paste" aria-label="Share or paste"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M8 7l4-4 4 4"/><path d="M5 12v8h14v-8"/></svg></div>
-          <div class="icon" id="helpBtn" title="Help" aria-label="Help">?</div>
-          <div class="icon" id="themeBtn" title="Theme" aria-label="Theme">◐</div>
-          <div class="icon" id="fsBtn" title="Full screen" aria-label="Full screen">⛶</div>
-        </div>
+    <div id="brandrow">
+      <a id="logoLink" href="https://codeberg.org/VARASYS/metronome" target="_blank" rel="noopener" title="VARASYS PolyMeter — source on Codeberg"><img class="brandlogo logo-dark" src="data:image/png;base64,@BUILD:logo-side-dark@" alt="VARASYS PolyMeter" /><img class="brandlogo logo-light" src="data:image/png;base64,@BUILD:logo-side-light@" alt="VARASYS PolyMeter" /></a>
+      <div class="hicons" id="utilrow">
+        <div class="icon" id="shareBtn" title="Share / paste" aria-label="Share or paste"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M8 7l4-4 4 4"/><path d="M5 12v8h14v-8"/></svg></div>
+        <div class="icon" id="helpBtn" title="Help" aria-label="Help">?</div>
+        <div class="icon" id="themeBtn" title="Theme" aria-label="Theme">◐</div>
+        <div class="icon" id="fsBtn" title="Full screen" aria-label="Full screen">⛶</div>
       </div>
-      <div class="vol"><span class="dyn" aria-hidden="true">p</span><input id="vol" type="range" min="0" max="100" value="85" aria-label="Volume" /><span class="dyn" aria-hidden="true">f</span></div>
     </div>
+    <div class="vol" id="volrow"><span class="dyn" aria-hidden="true">p</span><input id="vol" type="range" min="0" max="100" value="85" aria-label="Volume" /><span class="dyn" aria-hidden="true">f</span></div>
     <div class="sels">
       <label class="sel"><span>Set list</span><select id="slSel"></select></label>
       <label class="sel"><span>Track</span><select id="trkSel"></select></label>
@@ -843,7 +843,7 @@ function loadFromHash(text){
 
 /* ========================= HELP TOUR ========================================= */
 const TOUR=[
-  {sel:"#topctl", title:"Controls", text:"The ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, and the full-width volume slider (soft p → loud f)."},
+  {sel:"#brandrow,#volrow", title:"Controls", text:"The ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, and the full-width volume slider (soft p → loud f)."},
   {sel:".sels", title:"Pick what to play", text:"Choose a set list and the track within it. Tracks are your practice items — name them for whatever you're working on, even if two share the same beat."},
   {sel:"#saveBtn", title:"Save & library", text:"Save the current track — “Save as new”, or “Update” one of yours. The same sheet is your library: make set lists and rename / reorder / delete tracks. It all lives with the full editor too."},
   {sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras (above the tempo): Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."},