Merge branch 'ui-1-layout' into ui-2-connection

ui/index.html

@@ -217,7 +217,7 @@
   /* Every drop-down dark, like the fields; the panels' own rules below still size them. */
   select { background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent; border-radius: 3px;
            padding: 7px 8px; font: inherit; font-size: 13px; max-width: 100%; min-width: 0; }
-  select:focus { outline: none; border-color: var(--blue); }
+  select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
   option { background: #1e2329; color: var(--text); }
   .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 
@@ -268,6 +268,7 @@
          padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: #1e2329; color: var(--text);
          box-shadow: 0 20px 60px rgba(0,0,0,.6); -webkit-app-region: no-drag; }
   .pop .shelf-head { margin-bottom: 10px; }
+  .pop .shelf-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
   .pop .stats { margin-top: 12px; }
   .pop .chips { margin-top: 12px; }
   .batt .state { font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; }
@@ -673,7 +674,7 @@
     .detail-layout { display:flex; flex-direction:column; gap:24px; } .detail-buy { order:-1; width:100%; }
     .sources-dialog { padding:24px; } .sources-dialog .store-close { margin:-12px -12px -20px 0; }
   }
-  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .store-card, .source-toggle::after { transition:none; } .store-skeleton { animation:none; } }
+  @media(prefers-reduced-motion:reduce) { html, #scroll { scroll-behavior:auto; } .store-card, .source-toggle::after { transition:none; } .store-skeleton { animation:none; } }
 
 </style>
 </head>
@@ -1723,9 +1724,8 @@ function battery(b, power) {
   $("battChip").innerHTML = pct == null ? "—" :
     `<svg width="22" height="12" viewBox="0 0 22 12" aria-hidden="true"><rect x=".75" y=".75" width="18" height="10.5" rx="2" fill="none" stroke="#8f98a0" stroke-width="1.5"/><rect x="19.8" y="3.5" width="1.8" height="5" rx=".6" fill="#8f98a0"/><rect x="2.5" y="2.5" width="${(14.5 * chipPct / 100).toFixed(1)}" height="7" rx="1" fill="${color}"/></svg>${bolt}<span>${pct}%</span>`;
   $("battChip").title = `${label}. Click for the headset's details.`;
-  $("battChip").setAttribute("aria-label", `Battery ${pct}%, ${label}. Headset details`);
-  $("battChip").hidden = pct == null;
-  if (pct == null) closeDevPop();
+  $("battChip").setAttribute("aria-label", pct == null ? "Headset details" : `Battery ${pct}%, ${label}. Headset details`);
+  $("battChip").hidden = false;  // even without a battery reading: it's the way to the headset's details
 }
 // hidePopover throws where the menu isn't open (and doesn't exist in older browsers).
 function closeDevPop() { try { $("devPop").hidePopover(); } catch {} }
@@ -1734,13 +1734,14 @@ $("devPop").addEventListener("beforetoggle", e => {
   if (e.newState !== "open") return;
   const r = $("battChip").getBoundingClientRect();
   $("devPop").style.top = `${Math.round(r.bottom + 8)}px`;
-  $("devPop").style.right = `${Math.max(12, Math.round(innerWidth - r.right))}px`;
+  const width = Math.min(390, innerWidth - 24);  // as .pop's CSS width
+  $("devPop").style.right = `${Math.max(12, Math.min(Math.round(innerWidth - r.right), innerWidth - width - 12))}px`;
 });
 
 function render(s) {
   renderPerformance(s);
   battery(s.battery, s.power);
-  $("devPopTitle").textContent = window.connName || "Headset";
+  $("devPopTitle").textContent = $("devPopTitle").title = window.connName || "Headset";
   $("devName").textContent = `${s.hostname} · ${s.ip ?? "no IP"}`;
   $("updated").textContent = new Date(s.time * 1000).toLocaleTimeString();
   const h = s.disk.home;