Show the focus ring on the title form's and display picker's selects too

The fix review found two older rules (#titleForm select:focus, .disp select:focus)
that outranked the new select:focus-visible outline and still removed it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

README.md

@@ -222,7 +222,7 @@ Frame's software fits together, all checked against a real headset and labelled
 | [Frame Control for iPhone](docs/iphone.md) | The iPhone and iPad app, how it runs the server on the Frame, pairing |
 | [Recovery and OS images](docs/recovery-and-images.md) | Where to download the Frame's OS, what's inside, testing without the headset |
 | [AI agents and assistant](docs/agents.md) | Key-free MCP tools, human approvals, and an opt-in assistant panel |
-| [Testing](docs/testing.md) | Unit tests, end-to-end tests against a fake Frame in Docker, the headset smoke test and a Windows test VM |
+| [Testing](docs/testing.md) | Unit tests, end-to-end tests against a fake Frame in Docker, and the headset smoke test |
 | [Open questions](docs/open-questions.md) | What's still unchecked |
 
 <details>

docs/streaming.md

@@ -21,20 +21,6 @@ The confidence labels are the same as in [ssh.md](ssh.md).
 | **ADB + scrcpy (Lepton only)** | A mirror of the Android container | **Guess** | `brew install scrcpy android-platform-tools`, then `adb connect frame.local:5555` while Lepton Development is running ([adb_lepton](https://partner.steamgames.com/doc/steamhardware/steamframe/adb_lepton)), then `scrcpy`. This only shows Android apps, not SteamOS. |
 | VNC server on the Frame (krfb / wayvnc) | A mirror of the Plasma desktop | **Inferred (SteamOS)** | Deck users run krfb in Desktop Mode ([one.vg](https://one.vg/blog/remote-control-your-steam-deck)). On the Frame, the in-headset desktop is a virtual screen, and krfb isn't known to be preinstalled. RDP and Steam Link cover this case, so it's not recommended. |
 
-**RDP from Windows, verified 2026-09-30:** Windows 11 25H2's Remote Desktop
-(`mstsc`) against BUILD_ID 20260925.6191901. xrdp picks TLS, not NLA, so
-Remote Desktop never asks for a user or password. It warns that the certificate
-(`www.xrdp.org`) can't be verified. After **Yes**, xrdp shows its own "Login to
-frame" box with the username blank. Any user but `steamos` gets "User does not
-exist, or could not be authenticated". Signing in as `steamos` with the
-Developer Mode password opens a Plasma (X11) desktop within about 6 seconds.
-It's a new session on display `:10`, separate from what the headset shows,
-and it uses about 1.3 GB of the Frame's memory. Closing Remote Desktop leaves
-it running, and the next sign-in reconnects to it. To end it, find its
-session with `loginctl list-sessions` over SSH (its leader is `xrdp-sesexec`)
-and run `loginctl terminate-session <id>`; the headset's own session keeps
-running.
-
 **Recommendation for A:** start with Steam Link for macOS, because Valve
 documents it. Use Windows App (RDP) when you want a proper Linux desktop on the
 Mac with keyboard, mouse, and clipboard.

docs/testing.md

@@ -8,7 +8,6 @@ A fourth, a SteamOS VM, may come later ([issue #6](https://github.com/saphid/ste
 | Unit tests (`tests/*.py`) | `python3 -m unittest discover -s tests` | Nothing | Parsing, validation, request guards; SSH and HTTP are mocked |
 | Fake Frame (`tests/e2e`) | `scripts/e2e.sh` | Linux with Docker | The real server and scripts against a container that behaves like a Frame |
 | Headset smoke test | `scripts/frame-smoke.sh` | A Frame on the `frame` alias | Install, launch and remove on the real device, recorded with its BUILD_ID |
-| [Windows test VM](#windows-test-vm) | `scripts/windows-vm.sh` | A Linux machine with KVM and Docker | The Windows build on a real Windows desktop, against a real Frame when needed |
 
 ## Unit tests
 
@@ -164,86 +163,6 @@ refuses ids with a hyphen (`missing/invalid arguments`), which the fake had
 accepted. The fake now refuses them the same way, and Frame Control makes ids
 Steam accepts.
 
-## Windows test VM
-
-The unit tests run on Windows in CI, but the app itself doesn't. Anything that
-depends on the Windows desktop (Remote Desktop, the installer, the bundled
-Python, file dialogs) needs a real Windows machine. This is a Windows 11 VM in a
-[dockur/windows](https://github.com/dockur/windows) container on a Linux machine
-with KVM, driven from the Mac with `scripts/windows-vm.sh`.
-
-Setting it up, once, on the Linux machine:
-
-- **Windows comes from Microsoft.** The container downloads the Windows 11
-  image from Microsoft on first start. Windows runs unactivated, which is fine
-  for testing. Don't use activation workarounds or third-party Windows images.
-- **Publish its ports on loopback only.** Map `127.0.0.1:2222:22` (SSH),
-  `127.0.0.1:8006:8006` (the web console) and, if you need it,
-  `127.0.0.1:13389:3389`. The Mac reaches them through `ssh -J`. Use
-  `restart: "no"` and `stop_grace_period: 2m` so it only runs when someone is
-  testing, and a `docker stop` shuts Windows down cleanly.
-- **Give it SSH on first sign-in.** The container runs `/oem/install.bat`
-  once. Have it add the OpenSSH Server capability, start `sshd`, set PowerShell
-  as its default shell, and put a dedicated public key (for example
-  `~/.ssh/id_ed25519_winvm` on the Mac) in
-  `C:\ProgramData\ssh\administrators_authorized_keys`.
-- Give it 4 cores, 8 GB of memory and a 32 GB disk. That's enough for the app
-  and the tests.
-
-Using it, with `WINVM_HOST` set to the Linux machine's ssh alias:
-
-```sh
-scripts/windows-vm.sh up                        # start it and wait for SSH (1-2 minutes)
-scripts/windows-vm.sh put Frame-Control-Setup-x64.exe
-scripts/windows-vm.sh ps 'Start-Process "$env:USERPROFILE\Downloads\Frame-Control-Setup-x64.exe" /S -Wait'
-scripts/windows-vm.sh shot screen.png            # what's on its screen
-scripts/windows-vm.sh click 723 359              # screen pixels, as in the screenshot
-scripts/windows-vm.sh keys s t e a m o s ret     # QEMU key names
-scripts/windows-vm.sh down                       # shut Windows down
-```
-
-- **Clicks go through a scheduled task.** Commands over SSH run in a
-  session with no desktop, so `click` and `scroll` write the position to a
-  file, and a scheduled task running as the signed-in user replays it. The
-  VM's screen must be signed in; it is after `up`. Clicks and scrolls sent at
-  the same time run one after another. QEMU's own `mouse_move` is relative
-  and drifts, so the script doesn't use it.
-- **Screenshots may not show the pointer.** Check the result of a click (a
-  menu that opens, a button that changes) rather than the pointer's position.
-- **Windows' `ssh` waits for stdin.** The script closes it for every command.
-  Do the same if you run `ssh` in the VM by hand.
-- **Starting the app.** Run Frame Control in the signed-in session, not over
-  SSH. Use its Start-menu shortcut via `click`, or a scheduled task like the
-  one `click` uses.
-
-**Testing against a real Frame.** The VM reaches the headset on the LAN like
-any other computer. Run **Set Up Connection** in the VM's Frame Control once;
-that makes the VM's keys. So the VM doesn't keep access between test runs,
-afterwards take the lines it added out of the headset's
-`~/.ssh/authorized_keys`: the ones matching the VM's
-`~/.ssh/id_ed25519_frame.pub` and, if pairing made one,
-`~/.ssh/id_rsa_frame_devkit.pub`. Check that `ssh -o BatchMode=yes frame true`
-in the VM now fails. Then, around each run:
-
-```sh
-scripts/windows-vm.sh frame-key add       # let the VM's key into the headset
-# ... test ...
-scripts/windows-vm.sh frame-key remove    # and take it out again
-```
-
-`add` appends the VM's key tagged `windows-vm-test`, unless the headset
-already trusts that key through another line. `remove` deletes only the exact
-line `add` wrote, so it doesn't undo what Set Up Connection did, and it leaves
-the file alone if it can't rewrite it. Follow the shared-device
-procedure in [Headset smoke test](#headset-smoke-test) before installing or
-launching anything on the headset.
-
-**Verified 2026-09-30:** Windows 11 Pro 25H2 (build 26200) against a Frame on
-BUILD_ID 20260925.6191901. The script was used to install Frame Control 0.4.0,
-connect it to the Frame and follow Remote Desktop through to the Frame's
-desktop ([what it does](streaming.md#a-see-and-control-the-frame-from-the-mac)).
-`frame-key` left `authorized_keys` byte-for-byte as it was.
-
 ## Owned media player
 
 `tests/test_media.py` covers layout evidence and overrides, OU eye ordering,

docs/vr-utilities.md

@@ -26,7 +26,7 @@ it twice reuses the existing process.
 | Compositor CPU | OpenVR compositor render CPU milliseconds, not game CPU time. |
 | System CPU | `/proc/stat` busy-time delta across the sample, with guest time counted once and iowait treated as idle. |
 | GPU clock | `3d00000.gpu/cur_freq`, converted from Hz to MHz; frequency is not load. |
-| Hottest sensor / battery | Existing thermal-zone and battery sysfs reads from `frame_status.py`. |
+| Hottest sensor / battery | Existing thermal-zone and battery sysfs reads from `frame_status.py`. In the headset HUD only: the app shows them once, in the battery menu at the top. |
 
 OpenVR uses background application mode, which does not start SteamVR or keep
 it running. This mode also returned live timing in a read-only device probe.

scripts/windows-vm.sh

@@ -1,161 +0,0 @@
-#!/usr/bin/env zsh
-# Mac or Linux: drive a Windows 11 test VM for Frame Control's Windows build.
-# The VM is a dockur/windows container on another machine; this reaches it over
-# SSH through that machine. See docs/testing.md#windows-test-vm.
-#
-# Usage: scripts/windows-vm.sh <command> [args]
-#   up | down | status      start it (waits for SSH), shut Windows down cleanly, show state
-#   ps '<PowerShell>'       run PowerShell as the VM's user
-#   put <file> [<dir>]      copy a file in (default: the user's Downloads)
-#   shot <out.png>          save the VM's screen
-#   click <x> <y>           click screen pixel x,y in the signed-in session
-#   scroll <x> <y> <n>      turn the wheel n notches at x,y (negative scrolls down)
-#   keys <key>...           type QEMU key names: a, shift-a, ret, tab, esc, spc ...
-#   frame-key add|remove    let the VM's Frame Control key into the headset (`frame`
-#                           alias) for a test run, then take it out again
-#
-# Set WINVM_HOST to the ssh alias of the machine running the container. Optional:
-# WINVM_CONTAINER (frame-winvm), WINVM_USER (frame), WINVM_PORT (2222: the VM's
-# sshd, published on that machine's loopback), WINVM_KEY (~/.ssh/id_ed25519_winvm).
-set -euo pipefail
-setopt extendedglob
-
-host=${WINVM_HOST:?set WINVM_HOST to the ssh alias of the machine running the VM}
-ctr=${WINVM_CONTAINER:-frame-winvm}
-user=${WINVM_USER:-frame}
-port=${WINVM_PORT:-2222}
-key=${WINVM_KEY:-$HOME/.ssh/id_ed25519_winvm}
-opts=(-o ConnectTimeout=20 -o StrictHostKeyChecking=accept-new
-      -o UserKnownHostsFile=${TMPDIR:-/tmp}/windows-vm-known_hosts -i $key -J $host)
-TAG=windows-vm-test  # comment on the VM's key in the headset's authorized_keys
-
-die() { print -u2 "windows-vm: $*"; exit 1 }
-int() { [[ $1 == (-|)<-99999> ]] || die "not a whole number (up to 99999): $1" }
-# These go into commands run by a shell on the other machine, so keep them plain.
-for v in $host $ctr $user; do [[ $v == [A-Za-z0-9_.]##[A-Za-z0-9_.-]# ]] || die "not a plain name: $v"; done
-[[ $port == <1-65535> ]] || die "WINVM_PORT isn't a port: $port"
-
-# Windows' OpenSSH waits for stdin to close, so it always gets /dev/null. The
-# script travels UTF-16 base64-encoded, so no quoting survives two shells.
-vm_ps() {
-  local b64=$(print -rn -- "\$ProgressPreference = 'SilentlyContinue'"$'\n'"$1" |
-              iconv -f UTF-8 -t UTF-16LE | base64 | tr -d '\n')
-  ssh $opts -p $port $user@127.0.0.1 "powershell -NoProfile -NonInteractive -OutputFormat Text -EncodedCommand $b64" </dev/null
-}
-
-# QEMU's monitor inside the container: one command per line on stdin.
-monitor() { ssh $host "docker exec -i $ctr nc -q 1 -U /run/shm/monitor.sock" >/dev/null }
-
-# Input has to come from the signed-in desktop session, not SSH's session 0, so
-# a scheduled task running as the user replays one click or wheel turn written
-# to input.txt, then deletes the file to say it's done. Any error stops it
-# before that, so the caller times out instead of reporting a click.
-INPUT_PS1='$ErrorActionPreference = "Stop"
-$a = (Get-Content "$PSScriptRoot\input.txt").Trim() -split "\s+"
-Add-Type -Namespace WinVm -Name Input -MemberDefinition @"
-[DllImport("user32.dll")] public static extern bool SetProcessDPIAware();
-[DllImport("user32.dll")] public static extern bool SetCursorPos(int x, int y);
-[DllImport("user32.dll")] public static extern void mouse_event(uint flags, int dx, int dy, int data, System.IntPtr extra);
-"@
-[WinVm.Input]::SetProcessDPIAware() | Out-Null
-if (-not [WinVm.Input]::SetCursorPos([int]$a[0], [int]$a[1])) { throw "SetCursorPos failed" }
-Start-Sleep -Milliseconds 150
-if ($a[2] -eq "click") {
-  [WinVm.Input]::mouse_event(0x2, 0, 0, 0, [IntPtr]::Zero); Start-Sleep -Milliseconds 60
-  [WinVm.Input]::mouse_event(0x4, 0, 0, 0, [IntPtr]::Zero)
-} else { [WinVm.Input]::mouse_event(0x800, 0, 0, 120 * [int]$a[3], [IntPtr]::Zero) }
-Remove-Item "$PSScriptRoot\input.txt"'
-
-pointer() {  # x y click|wheel [notches]
-  local b64=$(print -rn -- $INPUT_PS1 | base64 | tr -d '\n')
-  vm_ps '$ErrorActionPreference = "Stop"
-$d = Join-Path $env:LOCALAPPDATA "windows-vm"; $req = "$d\input.txt"; $mine = $false
-# Giving up: end the helper first, or it could wake up and act in a later request.
-function Abandon {
-  Stop-ScheduledTask -TaskName WindowsVmInput -ErrorAction SilentlyContinue
-  foreach ($i in 1..25) {
-    if ((Get-ScheduledTask -TaskName WindowsVmInput -ErrorAction SilentlyContinue).State -ne "Running") { break }
-    Start-Sleep -Milliseconds 200
-  }
-  Remove-Item $req -ErrorAction SilentlyContinue
-}
-trap { [Console]::Error.WriteLine("windows-vm: $_"); if ($mine) { Abandon }; exit 1 }
-# One request at a time: the helper, the task and input.txt are shared. Windows
-# frees the mutex when this process ends, however it ends.
-$lock = New-Object Threading.Mutex($false, "windows-vm-input")
-try { $mine = $lock.WaitOne(15000) } catch [Threading.AbandonedMutexException] { $mine = $true }
-if (-not $mine) { [Console]::Error.WriteLine("windows-vm: another click or scroll is still in progress"); exit 1 }
-New-Item -ItemType Directory -Force $d | Out-Null
-[IO.File]::WriteAllText($req, "'"$*"'")
-[IO.File]::WriteAllText("$d\input.ps1", [Text.Encoding]::UTF8.GetString([Convert]::FromBase64String("'$b64'")))
-$act = New-ScheduledTaskAction -Execute powershell.exe -Argument "-NoProfile -WindowStyle Hidden -ExecutionPolicy Bypass -File `"$d\input.ps1`""
-$who = New-ScheduledTaskPrincipal -UserId $env:USERNAME -LogonType Interactive
-Register-ScheduledTask -TaskName WindowsVmInput -Action $act -Principal $who -Force | Out-Null
-Start-ScheduledTask -TaskName WindowsVmInput
-foreach ($i in 1..50) { if (-not (Test-Path $req)) { exit 0 }; Start-Sleep -Milliseconds 200 }
-Abandon
-[Console]::Error.WriteLine("windows-vm: no input after 10 s: is $env:USERNAME signed in on the VM screen, and is x,y on it?"); exit 1'
-}
-
-(( $# )) || die "usage: see the top of $0"
-cmd=$1; shift
-case $cmd in
-  up)
-    ssh $host "docker start $ctr" >/dev/null
-    for i in {1..60}; do
-      vm_ps 'exit 0' 2>/dev/null && { print "up"; exit 0 }
-      sleep 5
-    done
-    die "Windows didn't answer on SSH within 5 minutes" ;;
-  down)   # the container turns SIGTERM into an ACPI shutdown and waits for Windows
-    ssh $host "docker stop -t 150 $ctr" >/dev/null && print "down" ;;
-  status) ssh $host "docker ps -a --filter 'name=^$ctr\$' --format '{{.Names}}: {{.Status}}'" ;;
-  ps)     (( $# == 1 )) || die "usage: ps '<PowerShell>'"; vm_ps "$1" ;;
-  put)
-    [[ -f ${1:-} ]] || die "usage: put <file> [<dir>]"
-    scp -q $opts -P $port $1 "$user@127.0.0.1:${2:-C:/Users/$user/Downloads}/${1:t}" </dev/null ;;
-  shot)
-    (( $# == 1 )) || die "usage: shot <out.png>"
-    print "screendump /tmp/windows-vm-shot.ppm" | monitor
-    sleep 1
-    ssh $host "docker exec $ctr sh -c 'cat /tmp/windows-vm-shot.ppm && rm /tmp/windows-vm-shot.ppm'" | python3 -c '
-import re, struct, sys, zlib
-d = sys.stdin.buffer.read()
-m = re.match(rb"P6\s+(\d+)\s+(\d+)\s+255\s", d) or sys.exit("windows-vm: no screen dump")
-w, h = int(m[1]), int(m[2]); px = d[m.end():]
-raw = b"".join(b"\0" + px[y * w * 3:(y + 1) * w * 3] for y in range(h))
-chunk = lambda t, b: struct.pack(">I", len(b)) + t + b + struct.pack(">I", zlib.crc32(t + b))
-open(sys.argv[1], "wb").write(b"\x89PNG\r\n\x1a\n" + chunk(b"IHDR", struct.pack(">IIBBBBB", w, h, 8, 2, 0, 0, 0))
-                              + chunk(b"IDAT", zlib.compress(raw)) + chunk(b"IEND", b""))
-' $1
-    print $1 ;;
-  click)  (( $# == 2 )) || die "usage: click <x> <y>"; int $1; int $2; pointer $1 $2 click ;;
-  scroll) (( $# == 3 )) || die "usage: scroll <x> <y> <n>"; int $1; int $2; int $3; pointer $1 $2 wheel $3 ;;
-  keys)
-    (( $# )) || die "usage: keys <key>..."
-    for k; do [[ $k == [a-z0-9_.,/=-]## ]] || die "not a QEMU key name: $k"; done
-    for k; do print "sendkey $k"; done | monitor ;;
-  frame-key)
-    [[ ${1:-} == (add|remove) ]] || die "usage: frame-key add|remove"
-    pub=(${=$(vm_ps 'Get-Content (Join-Path $env:USERPROFILE ".ssh\id_ed25519_frame.pub")' | tr -d '\r')})
-    [[ ${pub[1]:-} == ssh-ed25519 && ${pub[2]:-} == [A-Za-z0-9+/=]## ]] ||
-      die "the VM has no Frame Control key yet: run Set Up Connection in the app first"
-    # $1: add|remove, $2: the key's base64, $3: the exact line this script owns.
-    ssh frame "sh -s -- $1 '$pub[2]' '$pub[1] $pub[2] $TAG'" <<'EOF'
-f=~/.ssh/authorized_keys
-if [ "$1" = add ]; then
-  if grep -qxF "$3" "$f"; then exit 0; fi
-  if grep -qF "$2" "$f"; then echo "the headset already trusts this key through another entry; left as it is"; exit 0; fi
-  [ -z "$(tail -c 1 "$f")" ] || echo >> "$f"   # a last line without a newline would swallow ours
-  echo "$3" >> "$f"
-else
-  t=$(mktemp "$f.XXXXXX") || exit 1
-  grep -vxF "$3" "$f" > "$t"   # 0: lines left, 1: none left, more: couldn't read or write
-  if [ $? -gt 1 ] || ! chmod 600 "$t" || ! mv "$t" "$f"; then
-    rm -f "$t"; echo "couldn't rewrite $f; it's unchanged" >&2; exit 1
-  fi
-fi
-EOF
-    print "frame-key $1: done" ;;
-  *) die "unknown command: $cmd (see the top of $0)" ;;
-esac

ui/index.html

@@ -27,8 +27,10 @@
   }
   * { box-sizing: border-box; }
   [hidden] { display: none !important; }  /* class display rules would otherwise win */
-  html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top)); }
-  body { margin: 0; color: var(--text); min-height: 100vh; padding-bottom: calc(46px + env(safe-area-inset-bottom));
+  /* On a computer the header and the Activity bar are the window's chrome: the page scrolls in #scroll
+     between them, so neither covers anything. Phones scroll the window (see the phone rules below). */
+  body { margin: 0; color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden;
+         padding-bottom: calc(42px + env(safe-area-inset-bottom));
          font: 14px/1.45 "Motiva Sans", -apple-system, "Segoe UI", Arial, sans-serif;
          background: radial-gradient(1400px 700px at 15% -15%, #2a475e 0%, transparent 60%),
                      linear-gradient(180deg, var(--bg) 0%, #16202d 40%, var(--bg-deep) 100%) fixed; }
@@ -38,13 +40,14 @@
   ::-webkit-scrollbar-track { background: transparent; }
 
   /* ---- top bar (Steam's STORE / LIBRARY / COMMUNITY strip) ---- */
-  header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 30px;
+  #scroll { flex: 1; min-height: 0; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 12px; }
+  header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 30px; flex: none; min-width: 0;
            height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(28px + env(safe-area-inset-right)) 0 calc(28px + env(safe-area-inset-left)); background: rgba(23, 29, 37, .94); backdrop-filter: blur(12px);
            box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.35); }
-  .brand { display: flex; align-items: center; gap: 11px; color: var(--bright); text-decoration: none; }
+  .brand { display: flex; align-items: center; gap: 11px; color: var(--bright); text-decoration: none; flex: none; }
   .brand svg { width: 30px; height: 30px; }
   .brand b { font-weight: 700; font-size: 15px; letter-spacing: 2.5px; }
-  nav { display: flex; gap: 4px; height: 100%; }
+  nav { display: flex; gap: 4px; height: 100%; flex: none; }
   nav a { display: flex; align-items: center; padding: 0 13px; height: 100%; color: var(--text); text-decoration: none;
           font-weight: 500; font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase;
           border-bottom: 3px solid transparent; transition: color .15s; }
@@ -58,10 +61,17 @@
   .dot.off { background: var(--bad); }
 
   main { max-width: 1480px; margin: 0 auto; padding: 22px calc(28px + env(safe-area-inset-right)) 30px calc(28px + env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 26px; }
-  .grid-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); gap: 22px; }
+  .grid-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); gap: 22px; align-items: start; }
   .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
-  @media (max-width: 1150px) { .grid-top, .grid-3 { grid-template-columns: 1fr; } header { gap: 16px; 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: 820px) { .brand b { display: none; } }
+  /* The header gives way as the window narrows: the wordmark goes, then the tabs tighten, then the
+     connection pill drops its second line. It fits down to the app's 760 px minimum, with room for
+     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: 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; } .pill .pt span { display: none; } }
   nav svg { display: none; }
   html { -webkit-text-size-adjust: 100%; }
   body { -webkit-tap-highlight-color: transparent; }
@@ -87,7 +97,7 @@
   .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: 420px; min-width: 190px; flex: 0 1 auto; background: var(--btn); }
+  .pill { height: 40px; padding: 0 12px; gap: 9px; max-width: 320px; min-width: 0; 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; } }
@@ -149,8 +159,10 @@
   /* ---- panels and section headers ---- */
   .panel { background: linear-gradient(180deg, rgba(42,47,56,.72) 0%, rgba(30,35,41,.9) 100%);
            border-radius: 4px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 0; }
-  .shelf-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
-  .shelf-head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); }
+  /* 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; }
   .sub { color: var(--muted); font-size: 12.5px; }
@@ -179,6 +191,11 @@
                                border-radius: 3px; padding: 9px 11px; font: inherit; }
   textarea { resize: vertical; min-height: 76px; }
   input:focus, textarea:focus { outline: none; border-color: var(--blue); background: rgba(0,0,0,.4); }
+  /* 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-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; }
 
   /* ---- headset view ---- */
@@ -223,15 +240,21 @@
   @keyframes spin { to { transform: rotate(360deg); } }
   .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
 
-  /* ---- device ---- */
-  .battery { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 3px; background: rgba(0,0,0,.22); }
-  .battery svg { width: 74px; height: 38px; flex: none; }
-  .battery .pct { font-size: 34px; font-weight: 300; color: var(--bright); line-height: 1; font-variant-numeric: tabular-nums; }
-  .battery .state { font-weight: 700; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 6px; }
-  .battery .state.charging { color: var(--green-hi); } .battery .state.full { color: var(--green); }
-  .battery .state.low { color: var(--bad); } .battery .state.draining { color: var(--muted); }
-  .battery .detail { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
+  /* ---- the headset's details: a menu under the battery chip ---- */
+  .pop { position: fixed; inset: auto; margin: 0; width: min(390px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow: auto;
+         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; }
+  .batt .state.charging { color: var(--green-hi); } .batt .state.full { color: var(--green); }
+  .batt .state.low { color: var(--bad); } .batt .state.draining { color: var(--text); }
+  .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;
@@ -350,7 +373,7 @@
   #repForm label input[type=text], #repForm textarea, #titleForm label input, #titleForm label select { margin-top: 5px; }
   #titleForm select { width: 100%; background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent;
                       border-radius: 3px; padding: 8px 10px; font: inherit; }
-  #titleForm select:focus { outline: none; border-color: var(--blue); }
+  #titleForm select:focus { border-color: var(--blue); }
   #titleForm .note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
   #titleForm .note.warn { color: #d9a23a; }
   #titleList { margin-top: 8px; }
@@ -397,7 +420,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; }
@@ -406,7 +428,7 @@
   .mv-opt .sub { display: block; margin-left: 22px; font-size: 12px; }
   .disp select { width: 100%; background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent; border-radius: 3px;
                  padding: 8px 10px; font: inherit; font-size: 13px; }
-  .disp select:focus { outline: none; border-color: var(--blue); }
+  .disp select:focus { border-color: var(--blue); }
   .disp .stats { grid-template-columns: repeat(3, 1fr); margin: 12px 0 4px; }
   .disp select:disabled { opacity: .6; }
   .disp .stat .v { font-size: 15px; }
@@ -433,11 +455,14 @@
   /* ---- phones, upright or on their side: tabs move to a bottom bar, as in iOS apps. Every edge keeps clear of
      the safe area (notch or Dynamic Island, rounded corners, home indicator); env() is zero on desktops. ---- */
   @media (max-width: 640px), (max-height: 500px) and (hover: none) {
-    html { scroll-padding-top: calc(64px + env(safe-area-inset-top)); }
+    html { scroll-behavior: smooth; scroll-padding-top: calc(64px + env(safe-area-inset-top)); }
+    body { height: auto; display: block; overflow: visible; }
+    #scroll { overflow: visible; }
     /* No blur here: it would make the header the containing block of the fixed tab bar. */
     header { height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); gap: 10px;
              backdrop-filter: none; background: rgb(23, 29, 37); }
     .brand svg { width: 26px; height: 26px; }
+    .brand { display: flex; } #refreshAll { display: inline-flex; } .pill .pt span { display: block; }  /* the tabs are at the bottom here */
     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);
@@ -623,7 +648,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>
@@ -648,7 +673,7 @@
   <div class="spacer"></div>
   <button class="pill" id="conn" role="status" aria-live="polite" title="Connection details"><span class="dot wait"></span><span class="pt"><b>Connecting…</b><span></span></span></button>
   <select class="devsel desk-only" id="devSel" aria-label="Headset" title="Switch headset" hidden></select>
-  <span class="chip" id="battChip" title="Battery">—</span>
+  <button class="chip" id="battChip" title="Battery and headset details" popovertarget="devPop" aria-haspopup="dialog" hidden>—</button>
   <button id="reportBtn" data-report title="Report a problem, with diagnostics" aria-label="Report a problem">
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.5"/></svg>
   </button>
@@ -656,7 +681,21 @@
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v6h-6"/></svg>
   </button>
 </header>
+<div class="pop" id="devPop" popover role="dialog" aria-labelledby="devPopTitle">
+  <div class="shelf-head"><h2 id="devPopTitle">Headset</h2><span class="count" id="devName"></span><span class="spacer"></span><span class="sub" id="updated"></span></div>
+  <div class="batt"><div class="state draining" id="battState">&nbsp;</div><div class="detail" id="battDetail">&nbsp;</div></div>
+  <div class="stats">
+    <div class="stat"><div class="k">Storage free</div><div class="v" id="sDisk">—</div><div class="meter"><i id="mDisk"></i></div></div>
+    <div class="stat"><div class="k">Memory used</div><div class="v" id="sMem">—</div><div class="meter"><i id="mMem"></i></div></div>
+    <div class="stat"><div class="k">Temperature</div><div class="v" id="sTemp">—</div><div class="d" id="dTemp">&nbsp;</div></div>
+    <div class="stat"><div class="k">Wi-Fi</div><div class="v" id="sWifi">—</div><div class="d" id="dWifi">&nbsp;</div></div>
+    <div class="stat"><div class="k">Uptime</div><div class="v" id="sUp">—</div><div class="d" id="dUp">&nbsp;</div></div>
+    <div class="stat"><div class="k">SteamOS</div><div class="v" id="sOs">—</div><div class="d" id="dOs">&nbsp;</div></div>
+  </div>
+  <div class="chips" id="services" aria-label="Running on the headset"></div>
+</div>
 
+<div id="scroll">
 <main>
   <div class="notice" id="updateBar" hidden>
     <div class="grow" id="updateText"></div>
@@ -747,29 +786,7 @@
     </section>
 
     <section class="panel" id="device">
-      <div class="shelf-head"><h2>Device</h2><span class="count" id="devName"></span><span class="spacer"></span><span class="sub" id="updated"></span></div>
-      <div class="battery">
-        <svg viewBox="0 0 74 38" aria-hidden="true">
-          <rect x="1.5" y="1.5" width="64" height="35" rx="5" fill="none" stroke="#8f98a0" stroke-width="3"/>
-          <rect x="67" y="12" width="5.5" height="14" rx="2" fill="#8f98a0"/>
-          <rect id="battFill" x="6" y="6" width="0" height="26" rx="2.5" fill="#59bf40"/>
-          <path id="battBolt" d="M37 5 L27 21 H34 L31 33 L42 16 H35 Z" fill="#fff" stroke="#1e2329" stroke-width="1.6" stroke-linejoin="round" visibility="hidden"/>
-        </svg>
-        <div style="min-width:0">
-          <div class="pct" id="battPct">—</div>
-          <div class="state draining" id="battState">&nbsp;</div>
-          <div class="detail" id="battDetail">&nbsp;</div>
-        </div>
-      </div>
-      <div class="stats">
-        <div class="stat"><div class="k">Storage free</div><div class="v" id="sDisk">—</div><div class="meter"><i id="mDisk"></i></div></div>
-        <div class="stat"><div class="k">Memory used</div><div class="v" id="sMem">—</div><div class="meter"><i id="mMem"></i></div></div>
-        <div class="stat"><div class="k">Temperature</div><div class="v" id="sTemp">—</div><div class="d" id="dTemp">&nbsp;</div></div>
-        <div class="stat"><div class="k">Wi-Fi</div><div class="v" id="sWifi">—</div><div class="d" id="dWifi">&nbsp;</div></div>
-        <div class="stat"><div class="k">Uptime</div><div class="v" id="sUp">—</div><div class="d" id="dUp">&nbsp;</div></div>
-        <div class="stat"><div class="k">SteamOS</div><div class="v" id="sOs">—</div><div class="d" id="dOs">&nbsp;</div></div>
-      </div>
-      <div class="chips" id="services"></div>
+      <div class="shelf-head"><h2>Volume</h2></div>
       <div class="vol">
         <button class="small" id="muteBtn" aria-label="Mute">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z"/><path id="volWaves" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" fill="none" stroke="currentColor" stroke-width="2"/></svg>
@@ -783,7 +800,7 @@
   <section class="panel" id="vrTools">
     <div class="shelf-head"><h2>VR comfort and performance</h2><span class="spacer"></span><span class="sub" id="vrUpdated">Waiting for the Frame</span></div>
     <div class="stats" id="vrMetrics"></div>
-    <div class="hint">Compositor FPS measures SteamVR output, not game FPS. Application FPS is unavailable when no app supplies timing. GPU time is render time, not GPU utilisation. Temperature is the hottest readable sensor.</div>
+    <div class="hint">Compositor FPS measures SteamVR output, not game FPS. Application FPS is unavailable when no app supplies timing. GPU time is render time, not GPU utilisation. Battery and temperature are in the battery menu at the top.</div>
     <div class="chips">
       <button class="small" id="hudStart">Open HUD in headset</button>
       <button class="small" id="hudStop">Close HUD</button>
@@ -1087,22 +1104,23 @@
 
     <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 action" id="panelsOpen">Open in headset</button></div>
+        <button class="small" id="panelsRefresh">Refresh</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>
 
     <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>
@@ -1154,6 +1172,7 @@
   </div>
   </div>
 </main>
+</div>
 <div class="dropzone" id="dropzone" hidden><div><b>Drop to send to the Frame</b>
   <span class="sub">Files go to <code>~/Downloads</code>; <code>.apk</code> files install as Android apps;
   a game's <code>.zip</code>, folder or <code>.exe</code> becomes a Steam library title.</span></div></div>
@@ -1344,6 +1363,9 @@ function esc(s) { return String(s ?? "").replace(/[&<>"']/g, c => ({"&":"&amp;",
 function gb(n) { return n >= 1e12 ? (n/1e12).toFixed(2) + " TB" : n >= 1e9 ? (n/1e9).toFixed(1) + " GB" : (n/1e6).toFixed(0) + " MB"; }
 function dur(s) { const d = Math.floor(s/86400), h = Math.floor(s%86400/3600), m = Math.floor(s%3600/60);
                   return d ? `${d}d ${h}h` : h ? `${h}h ${m}m` : `${m}m`; }
+// What scrolls: #scroll on a computer, where the header and Activity bar stay put; the window on phones.
+function scroller() { return getComputedStyle($("scroll")).overflowY === "visible" ? document.scrollingElement : $("scroll"); }
+function scrollToY(y) { scroller().scrollTo({ top: y, behavior: "instant" }); }
 function meter(el, pct, warnAt, badAt) {
   el.style.width = Math.max(0, Math.min(100, pct)) + "%";
   el.className = pct >= badAt ? "bad" : pct >= warnAt ? "warn" : "";
@@ -1464,7 +1486,7 @@ function setOnline(ok, why) {
   if (!ok) {
     $("offMsg").textContent = why || "Can't reach the Frame";
     setConn(false, "Offline");
-    $("battChip").hidden = true;
+    $("battChip").hidden = true; closeDevPop();
     if (was !== false) { log(why || "Can't reach the Frame", "e"); schedule(); }
     if (window.connBanner) window.connBanner();
   } else if (was === false) {
@@ -1512,7 +1534,7 @@ function renderPerformance(s) {
   const values = [["Compositor FPS", p.compositorFps, ""], ["Compositor period", p.frameMs, " ms"],
     ["Application FPS", p.appFps, ""], ["Render GPU time", p.gpuMs, " ms"],
     ["Compositor CPU", p.compositorCpuMs, " ms"], ["System CPU", p.cpuPercent, "%"],
-    ["GPU clock", p.gpuMHz, " MHz"], ["Hottest sensor", s?.temp, "°C"], ["Battery", s?.battery?.percent, "%"]];
+    ["GPU clock", p.gpuMHz, " MHz"]];
   $("vrMetrics").innerHTML = values.map(([label, v, unit]) => `<div class="stat"><div class="k">${label}</div><div class="v">${Number.isFinite(v) ? v.toFixed(1) + unit : "Unavailable"}</div></div>`).join("");
   $("vrUpdated").textContent = s ? `Sampled ${new Date(s.time * 1000).toLocaleTimeString()} · refreshes with status` : "No live sample";
 }
@@ -1644,10 +1666,6 @@ function battery(b, power) {
   const draining = !full && !charging && !idle && (!power || b?.status === "Discharging" || b?.watts < 0);
   const low = !charging && !full && pct != null && pct <= 15;
   const color = full || charging ? "#59bf40" : low ? "#d94126" : pct != null && pct <= 30 ? "#d9a23a" : "#dcdedf";
-  $("battFill").setAttribute("width", pct == null ? 0 : (55 * Math.min(100, Math.max(0, pct)) / 100).toFixed(1));
-  $("battFill").setAttribute("fill", color);
-  $("battBolt").setAttribute("visibility", charging ? "visible" : "hidden");
-  $("battPct").textContent = pct == null ? "—" : `${pct}%`;
 
   let label, cls, detail = [];
   if (!b) { label = "Battery unknown"; cls = "draining"; }
@@ -1663,7 +1681,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(" · ") || " ";
@@ -1672,13 +1690,25 @@ function battery(b, power) {
   const chipPct = pct == null ? 0 : Math.min(100, Math.max(0, pct));
   $("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;
-  $("battChip").hidden = pct == null;
+  $("battChip").title = `${label}. Click for the headset's details.`;
+  $("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 {} }
+// The battery chip's menu opens under the chip, right-aligned with it.
+$("devPop").addEventListener("beforetoggle", e => {
+  if (e.newState !== "open") return;
+  const r = $("battChip").getBoundingClientRect();
+  $("devPop").style.top = `${Math.round(r.bottom + 8)}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 = $("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;
@@ -2695,7 +2725,7 @@ function showApkAlternatives(reason, result, dev = window.connDevice) {
     }, dev));
     if (res) $("apkAltDlg").close(); else { b.disabled = false; b.textContent = "Install"; }
     await loadAndroid();
-    if (cat.apps) { const y = window.scrollY; filterCatalog(); window.scrollTo(0, y); }
+    if (cat.apps) { const y = scroller().scrollTop; filterCatalog(); scrollToY(y); }
     if (res && res.app) await offerTest(res.app);
   };
   if (!$("apkAltDlg").open) $("apkAltDlg").showModal();
@@ -2929,7 +2959,7 @@ function renderChips() {
 }
 
 function filterGames(keepScroll) {
-  const y = window.scrollY;
+  const y = scroller().scrollTop;
   if (gm.src === "owned") {
     if (!gm.owned) return;
     const terms = gm.q.toLowerCase().split(/\s+/).filter(Boolean);
@@ -2945,7 +2975,7 @@ function filterGames(keepScroll) {
   $("gmGrid").innerHTML = ""; gm.shown = 0; moreGames(n);
   if (!gm.results.length) $("gmGrid").innerHTML = `<div class="sub">${gm.src === "store" && !gm.storeQ
     ? "Type a name and press Enter to search the Steam store." : "Nothing matches. Try turning on more ratings above."}</div>`;
-  if (keepScroll) window.scrollTo(0, y);
+  if (keepScroll) scrollToY(y);
 }
 
 function price(p) {
@@ -3300,7 +3330,7 @@ document.body.addEventListener("click", async e => {
     if (action === "probe") { loadCatalog(); loadReports(); }
   }
   loadAndroid();
-  if (cat.apps) { const y = window.scrollY; filterCatalog(); window.scrollTo(0, y); }
+  if (cat.apps) { const y = scroller().scrollTop; filterCatalog(); scrollToY(y); }
 });
 loadCatalog();
 
@@ -3695,7 +3725,7 @@ function showPage() {
   document.querySelectorAll("nav a").forEach(a => a.classList.toggle("on", a.getAttribute("href") === "#" + page));
   document.title = page === "home" ? "Frame Control" : `${page[0].toUpperCase() + page.slice(1)} · Frame Control`;
   const section = !PAGES.includes(id) && id && $(id);
-  if (section) section.scrollIntoView(); else window.scrollTo(0, 0);
+  if (section) section.scrollIntoView(); else scrollToY(0);
   if (page === "tools") { loadMacView(); loadPanels(); }
 }
 window.addEventListener("hashchange", showPage);
@@ -4286,6 +4316,7 @@ function onConnection(s) {
   renderPill(); renderConnDlg();
   const devId = s.device && s.device.id;
   window.connDevice = devId || null;
+  window.connName = s.device ? s.device.name : null;
   if (link.device !== null && devId !== link.device) {
     log(`Now using ${s.device.name}`, "ok");
     state = null;
@@ -4315,7 +4346,7 @@ function onConnection(s) {
     if ($("wiDlg").open && !wi.job && !wi.starting) $("wiDlg").close();
     $("dispSel").innerHTML = "<option>Loading…</option>"; $("dispSel").disabled = true; $("dispCtl").hidden = true;
     link.reload = true;     // everything on the page was the other headset's
-    $("battChip").hidden = true;
+    $("battChip").hidden = true; closeDevPop();
   }
   if (s.phase !== link.phase || devId !== link.device) {
     if (s.phase === "connected") {