Merge branch 'ui-2-connection' into ui-3-home

# Conflicts:
#	ui/index.html

ui/index.html

@@ -68,7 +68,7 @@
      the macOS window buttons the app adds on the left. */
   header > button:not(.pill), header > .chip { flex: none; }
   header > button:not(.pill):not(.chip) { width: 36px; padding: 0; justify-content: center; }
-  @media (max-width: 1250px) { .brand b { display: none; } }
+  @media (max-width: 1340px) { .brand b { display: none; } header { gap: 22px; } }
   @media (max-width: 1150px) { .grid-top, .grid-3 { grid-template-columns: 1fr; } header { gap: 14px; padding: env(safe-area-inset-top) calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left)); } nav a { padding: 0 10px; } }
   @media (max-width: 960px) { header { gap: 10px; } nav { gap: 0; } nav a { padding: 0 8px; font-size: 13px; letter-spacing: .4px; }
     .brand, #refreshAll { display: none; }
@@ -98,13 +98,15 @@
   .wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
 
   /* ---- connection pill, its details dialog, and the Devices tab (frame_link.py) ---- */
-  .pill { height: 40px; padding: 0 12px; gap: 9px; max-width: 320px; min-width: 0; flex: 0 1 auto; background: var(--btn); }
+  .pill { height: 40px; padding: 0 12px; gap: 9px; max-width: 320px; min-width: 124px; flex: 0 1 auto; background: var(--btn); }
   .pill .dot { flex: none; }
   .pill .dot.wait { background: var(--warn); box-shadow: 0 0 6px rgba(217,162,58,.7); animation: pulse 1s ease-in-out infinite; }
   @keyframes pulse { 50% { opacity: .35; } }
   .pill .pt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; text-align: left; }
   .pill .pt b { font-weight: 500; font-size: 13px; color: var(--bright); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .pill .pt > span { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* "Connected" is never cut short: when the route doesn't fit beside it, the route wraps out of sight. */
+  .pill .pt > span { font-size: 11.5px; color: var(--muted); max-width: 100%; display: flex; flex-wrap: wrap; height: 1.2em; overflow: hidden; white-space: nowrap; }
+  .pill .via { white-space: pre; }
   .conn-now { display: flex; gap: 10px; align-items: baseline; }
   .conn-now .dot { position: relative; top: -1px; }
   .conn-now b { color: var(--bright); font-weight: 500; font-size: 15px; }
@@ -182,6 +184,7 @@
            border-radius: 4px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 0; }
   /* Buttons in a heading row wrap onto a line of their own rather than squeeze the heading. */
   .shelf-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
+  .panel > .shelf-head:first-child h2 { line-height: 28px; }  /* as tall as a button, so headings line up across panels */
   .shelf-head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); white-space: nowrap; }
   .shelf-head .count { color: var(--muted); font-size: 13px; }
   .shelf-head .spacer { flex: 1; }
@@ -297,6 +300,7 @@
   .batt .detail { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
   button.chip { height: 32px; padding: 0 12px; font-size: 13px; }
   .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 14px; border-radius: 3px; overflow: hidden; }
+  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
   .stat { background: rgba(0,0,0,.18); padding: 10px 12px; min-width: 0; }
   .stat .k { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
   .stat .v { color: var(--bright); font-size: 17px; margin-top: 1px; font-variant-numeric: tabular-nums;
@@ -462,7 +466,6 @@
   .game-card .bar > i { display: block; height: 100%; background: var(--action); }
   .f-0 { color: var(--muted); }
   /* ---- Android display ---- */
-  #mvQuality { background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent; border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 12px; }
   .mv-windows { max-height: 420px; overflow-y: auto; }
   .mv-perm { background: rgba(255,190,60,.08); border: 1px solid rgba(255,190,60,.25); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
   .mv-perm .row { margin-top: 8px; }
@@ -507,6 +510,8 @@
     .brand svg { width: 26px; height: 26px; }
     .brand { display: flex; }  /* the tabs are at the bottom here; Refresh is automatic */
     .pill .pt > b { display: block; } .pill .via { display: inline; } header .pill .pt > span { font-size: 11.5px; color: var(--muted); }
+    .pill { min-width: 104px; }
+    @media (max-width: 374px) { .brand { display: none; } }  /* the smallest phones: the pill needs the room */
     header .chip { height: 30px; padding: 0 10px; }
     nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; gap: 0;
           height: calc(58px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
@@ -1067,13 +1072,14 @@
   <div class="grid-3">
     <section class="panel" id="macview" hidden>
       <div class="shelf-head"><h2>Mac in the headset</h2><span class="count" id="mvCount"></span><span class="spacer"></span>
-        <select id="mvQuality" title="Picture quality and bandwidth">
-          <option value="sharp">Sharp</option><option value="balanced" selected>Balanced</option>
-          <option value="light">Light</option><option value="compatible">Compatible (JPEG)</option>
-        </select>
         <button class="small" id="mvRefresh">Refresh</button></div>
       <label class="mv-opt"><input type="checkbox" id="mvSeparate" checked> Give each window its own display
         <span class="sub">its menus and sheets come along, nothing covers it, and it goes back when you stop</span></label>
+      <div class="row" style="margin:0 0 12px"><label for="mvQuality">Picture quality</label>
+        <select id="mvQuality" title="Sharper pictures use more of your network">
+          <option value="sharp">Sharp</option><option value="balanced" selected>Balanced</option>
+          <option value="light">Light</option><option value="compatible">Compatible (JPEG)</option>
+        </select></div>
       <div class="mv-perm" id="mvPerm" hidden></div>
       <div class="list" id="mvDisplays"></div>
       <div class="shelf-head" style="margin-top:16px"><h2>Windows</h2><span class="count" id="mvWinCount"></span></div>
@@ -1113,9 +1119,9 @@
 
     <section class="panel" id="panels">
       <div class="shelf-head"><h2>Panel switcher</h2><span class="spacer"></span>
-        <button class="small" id="panelsRefresh">Refresh</button>
+        <button class="small" id="panelsRefresh">Refresh</button></div>
-        <button class="small action" id="panelsOpen">Open in headset</button></div>
       <div class="list" id="panelList"><div class="sub">Refresh to see open panels.</div></div>
+      <div class="row" style="margin-top:12px"><button class="small action" id="panelsOpen">Open in headset</button></div>
       <div class="hint">Choose a panel to show it in SteamVR. The headset switcher stays available from Steam's dashboard.
         Saved spatial layouts are not available yet.</div>
     </section>
@@ -1769,7 +1775,7 @@ function battery(b, power) {
     if (b?.timeToEmpty > 0 && b.timeToEmpty < 86400) detail.push(`About ${dur(b.timeToEmpty)} left`);
   }
   if (power) detail.push(`${/PD/.test(power.type || "") ? "USB-C PD" : power.type || "Charger"}${power.watts ? ` ${Math.round(power.watts)} W` : ""}`);
-  if (b?.tempC != null) detail.push(`${b.tempC.toFixed(0)}°C`);
+  if (b?.tempC != null) detail.push(`battery ${b.tempC.toFixed(0)}°C`);
   $("battState").textContent = label;
   $("battState").className = "state " + cls;
   $("battDetail").textContent = detail.join(" · ") || " ";