docs(skill): what a fresh install is doing before you measure it

Three things about a fresh install cost a measurement each, and none of
them was written down: it downloads the real catalog, so job-band is
103px of a 439px screen and every vertical number is wrong; stopping
that build returns cleanly and it **starts again within seconds**, so it
has to be stopped immediately before a measurement rather than once at
the start; and a library added over the bridge does not dismiss the
first-run wizard, which then sits over whatever you are looking at with
a correctly disabled button, reading exactly like a swallowed tap.

Also the scoped-storage path that works, the appops grant whose absence
sends the app to the system "All files access" screen on launch, and
why EXPR='...' cannot carry an apostrophe -- a file path with one in it
fails as a JavaScript error. The positional form takes a file.

.gitignore

@@ -88,3 +88,8 @@ build/android/overlay.json
 # Written by @semantic-release/changelog purely to carry the release notes
 # into scripts/gitea-release.sh; the release page is the changelog.
 .release-notes.md
+
+# Agent session log: local scratch, not repo memory (that is CLAUDE.md
+# and .planning/). Written by the scheduled backlog runs.
+.pi/journal.md
+.pi/schedule-prompts.json

.pi/prompts/next-issue.md

@@ -0,0 +1,142 @@
+---
+description: Take on the next actionable backlog issue end to end, and stop
+---
+Take on exactly one issue from the YellowJacket backlog, end to end, and stop.
+
+Repo: yonlu/yellowjacket at https://git.ljones.me — API base
+https://git.ljones.me/api/v1/repos/yonlu/yellowjacket, auth with
+`-H "Authorization: token $GITEA_TOKEN"`. Default branch is `main`.
+
+## 1. Orient before you pick
+
+Read, in this order: `CLAUDE.md` (the architecture and the reasons behind
+it), `.pi/journal.md` (what happened last), `.planning/NOTES.md` (what was
+already considered and rejected), and `.planning/plans/active/`. Do not skip
+this because the issue looks small — most of this codebase's traps are
+written down in exactly one of those four places, and the ones that bite are
+the ones you didn't read.
+
+## 2. Pick the issue
+
+List open issues. Choose the single highest-value one that is *actionable
+right now*:
+
+- Order by `Priority/Critical` → `High` → `Medium` → `Low`. Within a tier,
+  prefer `Reviewed/Confirmed`, then `Kind/Bug` over `Kind/Enhancement` over
+  `Kind/Feature`.
+- Consult issue #73 (the roadmap) — if it sequences the candidates, that
+  ordering wins over the label ordering.
+- **Skip** anything labelled `Status/Blocked`, `Status/In Progress`,
+  `Status/Abandoned`, `Reviewed/Won't Fix`, `Reviewed/Duplicate`,
+  `Reviewed/Invalid`, or already carrying an open PR.
+- **Skip anything someone else is already on.** The label is not the only
+  claim, because a concurrent session may not have applied it — several pi
+  sessions run against this repo from separate worktrees under
+  `~/.paseo/worktrees/`. Run `git ls-remote --heads origin` and skip any
+  issue whose number or slug matches an existing branch (`60-…`,
+  `fix/<slug>`). A duplicated fix costs more than a skipped issue.
+- **Skip** anything that cannot be verified without hardware you do not
+  have: physical-device Android behaviour (audio output, on-device file
+  writes, real gesture input). A browser at 424px is not a phone — see the
+  Chrome 113 section of `CLAUDE.md`.
+- **Skip** intermittent-failure issues unless you can reproduce the failure
+  on demand within a few minutes. Chasing a 1-in-3 flake is an unbounded
+  task and does not belong in a scheduled run.
+- If nothing qualifies, say so, do nothing, and stop. An empty run is a
+  correct outcome.
+
+## 3. Claim it
+
+Add `Status/In Progress` to the issue and comment that you are picking it
+up. Then branch:
+
+```
+git fetch origin && git checkout -b <type>/<short-slug> origin/main
+```
+
+`<type>` matches the issue's `Kind` (`fix/`, `feat/`, `refactor/`, `test/`,
+`docs/`, `ci/`). Branch from `origin/main`, never by checking out `main`
+itself — this repo is worked from several git worktrees at once and `main`
+is checked out in one of them, so `git checkout main` fails outright.
+
+## 4. Do the work
+
+Fix the issue that was reported and nothing else. Match the surrounding
+code's style. Follow the constraints in `CLAUDE.md` rather than reasoning
+from first principles — where it explains why something is shaped the way it
+is, that shape is load-bearing and there is usually a test pinning it.
+
+**Anything else you discover becomes a new issue, not a bigger diff.** File
+it with the right `Area/`, `Kind/`, `Priority/` labels, describe the
+symptom before the theory, and link it from your PR. Scope creep is the
+failure mode this instruction exists to prevent.
+
+If the work turns out to be materially larger than the issue implied, stop:
+comment on the issue with what you found and what it would actually take,
+remove `Status/In Progress`, push nothing, and end the run.
+
+## 5. Verify — the right tier, not the cheapest one
+
+Run `make generate` if you touched `.sql` or `.templ`, and `make bindings`
+if you changed a bound Go signature. Then run what the change actually
+demands:
+
+- Go change → `make lint` and `make test` (both cover all three build
+  configurations).
+- Frontend component or store → `make ui-test`.
+- User-visible flow → `make e2e` against `make dev-headless`. **Check the
+  port first**: `ss -ltn | grep 34115`. If it is occupied, another worktree
+  is already running the app — do not start a second one and do not run
+  `make e2e`. Attaching to someone else's build produces a green result
+  about code that is not yours, which is worse than no result. Either
+  choose an issue that does not need this tier, or stop and say why.
+- Anything cosmetic or layout-related → look at a screenshot. Several bugs
+  in this repo's history were invisible to every assertion and obvious in an
+  image.
+
+A tier you skipped is a claim you did not check. If a tier fails for reasons
+unrelated to your change, say so explicitly rather than quietly moving on.
+
+## 6. Keep the documentation true
+
+If you changed structure, behaviour, or a constraint, update `CLAUDE.md` in
+the same commit. That file is this project's memory; a change that leaves it
+describing the old shape is worse than no change. Append a short entry to
+`.pi/journal.md` covering what you did, what you verified, and what you left
+open.
+
+## 7. Commit and open the PR
+
+Conventional Commits, imperative subject, ≤72 chars, scope optional. The
+body explains *why*. Push the branch — never push to `main`, never
+force-push.
+
+Open the PR:
+
+```
+curl -sS -X POST \
+  -H "Authorization: token $GITEA_TOKEN" \
+  -H "Content-Type: application/json" \
+  https://git.ljones.me/api/v1/repos/yonlu/yellowjacket/pulls \
+  -d '{"head":"<branch>","base":"main","title":"<subject>","body":"<body>"}'
+```
+
+The body states: what the issue was, what you changed and why, **which
+verification tiers you ran and their results**, anything you deliberately
+did not do, and `Closes #<n>`.
+
+Then wait for CI (`ci.yml`, jobs `check` and `e2e`) and report the result on
+the PR. If it fails, read the log — `gitea_ci`'s `job_logs` 404s on this
+Gitea build, so use
+`GET /api/v1/repos/yonlu/yellowjacket/actions/runs/<run>/jobs` for per-step
+status and `GET /api/v1/repos/yonlu/yellowjacket/actions/jobs/<id>/logs` for
+the log — and fix it. Two consecutive failed CI runs on the same cause: stop,
+comment what you know on the PR, and leave it for a human.
+
+**Do not merge.** Comment on the issue linking the PR, leave
+`Status/In Progress` on, and end the run.
+
+## Finally
+
+Report in three lines: which issue you took, what state it is in
+(PR open / CI green / stopped and why), and any issues you filed.

.pi/skills/yellowjacket-dev/SKILL.md

@@ -130,7 +130,13 @@ reference, because you need them *before* the failure, not after.
   what you otherwise get is `Property 'scroll' does not exist on type
   'CSSResult'` pointing at a line of prose, or every test in the suite
   failing to import. It went in after the trap cost a fourth session in
-  which its own warning had been read twice.
+  which its own warning had been read twice. **The same command carries
+  a second CSS check**: a nested rule whose selector starts with an
+  element name (`audio-player { … }` rather than `& audio-player { … }`)
+  is silently dropped by the device's Chrome 113 and by nothing else, so
+  every tier you can run renders it correctly. Run it after touching
+  `index.css` or any `css` literal; a rule directly inside a top-level
+  `@media` is not nested and is not flagged.
 - **A failing CI job's log is reachable even when `gitea_ci job_logs`
   says it is not.** That endpoint 404s on this Gitea build. The REST
   API answers, with the `GITEA_TOKEN` already in the environment:

.pi/skills/yellowjacket-dev/references/android-tier.md

@@ -524,6 +524,61 @@ Four things about it, each of which costs an hour if met cold:
   app.yellowjacket.dev android.permission.READ_MEDIA_AUDIO` (and
   `POST_NOTIFICATIONS`) ahead of the launch skips it.
 
+### Getting the app into a state worth measuring
+
+A fresh install is **not** a neutral starting point, and three things
+about it will each cost you a measurement.
+
+**It downloads the real catalog.** `YJ_CORE_INDEX_URL` is stubbed in
+`dev-headless.sh` and in CI and is *real* here, so the app spends its
+first minutes fetching ~0.6 GB and `job-band` is **103px of a 439px
+screen** while it does. Every vertical number taken in that state is
+wrong -- one #51 measurement had the album art at 0px and it was
+entirely this.
+
+`__yj.call("explore.Service.StopIndexBuild", [])` stops it and returns
+cleanly. **It then starts again within seconds.** So stop it
+*immediately before* the measurement rather than once at the beginning,
+and check `jobs.Service.GetJobs` afterwards -- an empty array is the
+only proof. `jobs.Service.ClearFinishedJobs` tidies the finished rows
+that otherwise keep the band open.
+
+**A library added over the bridge does not dismiss the first-run
+wizard.** `library.Library.AddLibrary` works and scans, but the wizard
+checks for an existing library once, on mount, and its "Get Started"
+button gates on a directory chosen *in the wizard* -- so it stays up
+with a correctly disabled button over everything you are trying to
+measure. Nothing is broken; reload the page and it is gone. This reads
+exactly like a tap being swallowed, which is the expensive part.
+
+**Scoped storage decides where the music can be.** `/sdcard/Music/...`
+plus `pm grant <pkg> android.permission.READ_MEDIA_AUDIO` works and
+`AddLibrary` takes the plain path; a push into
+`/sdcard/Android/data/<pkg>/files/` looks like it worked and then is not
+there. Some builds additionally want
+`appops set <pkg> MANAGE_EXTERNAL_STORAGE allow`, and until they have it
+the app opens the *system* "All files access" screen on launch -- so
+`dumpsys window | grep mCurrentFocus` naming `com.android.settings` is
+that, not a crash.
+
+### A note on quoting `make android-eval`
+
+`EXPR='...'` is a single-quoted shell word, so anything with a quote or
+an apostrophe in it -- a file path like `Blazo, 49'ers - ...`, or a
+snippet containing a string literal -- breaks in a way that reads as a
+JavaScript error. Put the expression in a file and pass it positionally:
+
+```bash
+node ./scripts/android-eval.mjs "$(cat /tmp/probe.js)"
+```
+
+That is the same script `make android-eval` wraps, so nothing is lost.
+Two things worth knowing about it: it does **not** await a promise, so
+an async call has to park its result (`window.__r = ...`) and be read
+back in a second eval; and the shim from the section below is lost on
+every reload and every app restart, along with the devtools socket,
+whose name carries the pid.
+
 ### Calling a binding on the device
 
 **The runtime call does not go over HTTP on Android**, and this is worth

.planning/NOTES.md

@@ -4707,3 +4707,208 @@ measurement taken was of a screen with `job-band` on it and the art at
 route other than its own** (#175) — it was still up, full-screen and
 intercepting pointer events, after `AddLibrary` succeeded through the
 binding, and was gone after a relaunch. Filed.
+
+## The context menu was clipped on the device, and the fix needed four measurements nothing here could make (measured 2026-08-21, TLP301 / Chrome 113 / 424x439)
+
+#60 had been diagnosed from the Web Awesome source and was right. What
+the device added was the numbers, and three things the reading had not
+reached.
+
+**The clip, reproduced before any code was written.** Long-press on the
+lowest visible track row at 424x439:
+
+| | |
+|---|---|
+| viewport | 424x439 |
+| `.main-panel` | 0 to **318**, computed `contain: content` |
+| menu panel | 191 to **401**, 210px tall |
+| clipped away | **83px, three of seven items** |
+| `wa-popup` computed position | `fixed` |
+| `HTMLElement.prototype.hasOwnProperty('popover')` | **false** |
+| row height | **29px** (against a 44px floor and a 48px ask) |
+
+A screenshot shows the menu sliced off flush with the mini player's top
+edge. Both halves of the diagnosis are therefore measured, not inferred.
+
+**"A dialog escapes containment" was the premise, and it was untested.**
+Every dialog in this app is mounted in `index.html`, *outside*
+`.main-panel` — so nothing here was evidence about a dialog opened from
+inside a view, which is what this change needed. A probe `<dialog>`
+appended to `track-list`'s shadow root and `showModal()`n paints to
+y=439, over the mini player and the tab bar. A top-layer element's
+containing block is the viewport, paint-contained ancestor or not.
+Checking that first cost ten minutes and would have cost a rebuild.
+
+**The UA stylesheet is the thing that makes a naive sheet look wrong.**
+That same probe came out **354px wide on a 424px screen**, centred,
+because a native `<dialog>` carries `max-width: calc(100% - 6px - 2em)`
+and `margin: auto`. `max-width: none` and explicit margins are four
+declarations that are pure undoing.
+
+**A retry loop cannot win against a steal that happens later.**
+`MenuKeyboard` focuses the first item and returns as soon as it lands;
+`wa-dialog` then focuses `[autofocus]` or *itself* on the frame after
+`showModal()`, and it cannot see our first item to prefer it — the
+panel is slotted through `menu-surface`, so the dialog's own
+`querySelector` stops at the `<slot>`. Measured: the sheet opened with
+`document.activeElement` on the `<dialog>` and every arrow key went
+nowhere. Lengthening the retry budget does not help, because the first
+attempt *succeeds*. The surface announcing `menu-shown` after
+`wa-after-show`, and the keyboard re-asserting, is the fix.
+
+**The submenu was made worse before it was made better, and only a
+measurement caught it.** `#playlist-submenu` is a
+`placement="right-start"` flyout anchored to its row. Making the menu a
+full-width sheet moved that anchor to x=0, so the flip put the playlist
+picker at **x −182 to 0 — entirely off-screen**, and "Add to Playlist"
+led nowhere at all. Before the change the anchor row started at x≈245
+and the same flip landed it on screen. It is a `menu-surface` too now
+and stacks as a second sheet. Two lessons: a change that moves an
+anchor changes every flip decision downstream of it, and *the scope I
+declared on the issue was wrong* — I had said I would measure the
+submenu and file it, and the measurement said fix it.
+
+**And the sweep found two call sites the conversion missed.** Twelve
+were converted by hand; `menu-surface.test.ts` reads every source file
+and fails on a `<wa-popup>` outside a three-file allowlist, which
+immediately named `queue-panel`'s add-to-playlist popup (a real menu,
+converted) and `now-playing`'s cover preview (a hover affordance in the
+bottom bar — allowlisted, since a touch device never opens it and
+nothing clips it). A thirteenth menu written as a bare popup would pass
+every tier here and be clipped on the device, which is precisely why
+the guard is a source sweep rather than a rendered assertion.
+
+**What no tier here can see remains the clip itself.** This runner's
+Chromium and CI's WebKit both have the Popover API, so the popup is
+top-layered and correct and a "not clipped" assertion passes on the
+broken build. The specs assert the *mechanism* — that the surface is a
+native `<dialog>` at phone width — which is the same move
+`queue-as-a-screen.spec.ts` makes about containment and for the same
+reason.
+
+## Now Playing was not drawing a small square, it was drawing a crop (measured 2026-08-21, TLP301 / Chrome 113 / 424x439)
+
+#172 handed #51 a design question — whether the album art gets a floor
+with the block scrolling, or whether the screen reflows below some
+height. Measuring it first turned up a defect underneath the question,
+and the defect is bigger than the phone.
+
+**The art was never square.** `aspect-ratio` is specified not to
+re-derive the width when `max-height` clamps the height — unlike an
+intrinsic ratio, which CSS2.1 10.4 preserves under both bounds. So
+`width: min(100%, 60vh)` made the width definite, the ratio derived a
+height from it, `max-height: 100%` clipped that height, and the width
+stayed where it was. `object-fit: cover` then cropped a square cover
+into the band. On the device: **264x53**, a 5:1 strip. #172's own table
+called it "39px of art" and the missing half is that those 39px were
+263 wide.
+
+**And it is not only the phone.** The leftover exceeds the width only
+above ~843px of viewport, so every height from ~500 to ~843 drew a
+crop too — most phones, and any short window. The e2e spec written for
+this fails on the old build at 424x439 (263x39), 390x700 (358x315) and
+900x500 (300x36), and *passes* at 412x869, which is the boundary
+falling exactly where the arithmetic says it should.
+
+**Both maxes with auto sizes is the whole fix**, and it was chosen by
+asking Chrome 113 rather than by reasoning: a probe shadow root at
+column heights of 288, 300, 451, 600 and 800 measured four candidate
+rules. `max-width/max-height: 100%` with `width/height: auto` is square
+at all five; the shipped rule cropped at four; `aspect-ratio` on the
+box cropped at the tallest. A corollary that makes it free: `auto` will
+not upscale past the natural size, and the largest tier `saveCoverArt`
+keeps is 400px, so nothing is lost by never exceeding it.
+
+**The placeholder cannot use that rule and needed its own**, which is
+the part that would have shipped broken. It is not a replaced element,
+so with no intrinsic size auto/auto collapses it to its icon —
+measured at **13x58**, neither square nor the art's size. Three things
+about the rule it did get:
+
+- It is driven from the **height**, which is the axis that binds
+  everywhere this view is reached from.
+- A flex item's automatic minimum is its content, so without
+  `min-width: 0` the icon's own width becomes a floor and the box goes
+  wider than it is tall the moment the row is shorter than the icon —
+  which is exactly the state a job band puts this screen in.
+- **A non-replaced box cannot express "the largest square that fits" at
+  all**, because whichever max clamps does not re-derive the other. The
+  height-driven rule alone went **380x484** at 412x869 — a tall phone,
+  #51's other named device — and `max-height: calc(100vw - 2rem)` is
+  what closes it. That is sound here for the reason `60vh` was not: this
+  is a phone-width detail view, so its content box really is the
+  viewport less the host's own gutters, and it is a *max*, so if that
+  ever stopped being true the failure is a square bounded early rather
+  than a crop. `rem` and not `em` — the box sets `font-size: 3rem` for
+  the icon, so `2em` there is 96px.
+
+**Then the design question, and the reflow is the answer.** The
+stacked layout's budget is fixed — 48px of header, 143px of transport
+since #64, 78px of names, 68px of padding and gaps — so the art gets
+`height - 386`, which is 53px at 439. A floor on the art scrolls the
+transport off the bottom, and "controls never scroll off" is #51's own
+Direction and plan 018's promise. So below 500px the art and the names
+share a row, where the art is bounded by the row's height rather than
+by the column's leftover: **53px to 143px on the device**, measured on
+the shipped build, with nothing scrolling and the transport untouched.
+
+**500 is where the two layouts cross, not a round number.** In a row
+the art is `height - 296` and the names get what is left of 392px, so
+the names hold 176px at exactly 500 and less above it; stacked, the art
+is `height - 386`, which passes 176px at 562. It is keyed on height
+alone rather than on the phone's width because it is an answer to
+vertical room — a 900x450 window has the same problem and the same fix.
+
+Two things the audit found that are *not* this, and are filed:
+**#186**, every control that is not the transport is under the 44px
+floor (the sort direction arrow is 28x21, and `search-trigger` — which
+exists only on a phone — is 40x40), and **#187**, the seek bar's drag
+target is 6px tall.
+
+**What the audit did not find is a reachability failure**, which is
+worth recording because it is the promise plan 018 makes. At 424x439,
+on every view -- the ten primary ones, the queue, `album-details`,
+`artist-details`, Downloads and Autotag -- `documentElement.scrollWidth`
+is 424 against a 424 viewport, no control sits outside a scrollable
+ancestor, and a hit test at each control's centre reaches the control.
+The width work of #57, #62, #55 and #59 holds; what was left was
+vertical, and it was this screen.
+
+**A number measured on the device is not a number CI can assert.** The
+spec's floor on the art's height passed here at 114 and failed in CI at
+**64**, and both are honest: this app is long-lived, so a job staged by
+an earlier spec is still on screen, and `volume-control` renders in a
+browser where it does not on Android. Both are chrome above and below
+the view and both move the leftover. That is the same trap the entry
+above about staged jobs describes, arriving as a *measurement* rather
+than as a stuck job. The assertion is the mechanism now -- in a row the
+art fills the row's height rather than being the leftover -- and the
+53-to-143 stays on the issue, where it was measured.
+
+The probe is worth keeping in mind for the next audit, because two of
+its three checks needed a second pass to mean anything. "Painted
+outside the viewport" flags a horizontally scrolling carousel -- the
+home shelves -- so the real question is whether a *scrollable ancestor*
+can bring the element back. And a hit test at a control's centre flags
+everything below the fold in a scroll container, so it only says
+something once the control is on screen. Both first drafts produced
+long lists of nothing.
+
+## Two traps that cost time on the device, both already written down (2026-08-21)
+
+Recorded because both are in `android-tier.md` and I met them anyway.
+
+**A fresh install downloads the real catalog**, so `job-band` is 103px
+of a 439px screen and every vertical measurement is wrong. Worse, it
+**restarts**: `explore.Service.StopIndexBuild` returns cleanly and the
+job is `running` again within seconds, so it has to be stopped again
+immediately before a measurement rather than once at the start.
+`YJ_CORE_INDEX_URL` is stubbed in `dev-headless.sh` and in CI and is
+real on a device.
+
+**The first-run wizard does not re-check for a library it did not
+create.** Adding one through `library.Library.AddLibrary` over the
+bridge leaves the wizard up with its "Get Started" button correctly
+disabled — it gates on a directory chosen *in the wizard*, and the
+existing-library check runs once, on mount. A reload clears it. Nothing
+is broken; it cost twenty minutes of believing a tap had been swallowed.

CLAUDE.md

@@ -1367,8 +1367,17 @@ against the real components:
   `wa-dropdown-item` sets its `role` in its *own* first update, so a
   `[role^="menuitem"]` query at `updateComplete` finds nothing — which
   reads exactly like a menu that opened and refused to take focus.
-- **`focus()` on a popup that has not positioned itself is a silent
-  no-op**, so the first focus is retried across a few frames.
+- **`focus()` on a surface that has not shown itself is a silent
+  no-op**, so the first focus is retried on a *time* budget rather
+  than a frame count — the thing being waited for is another
+  component's animation. And a retry is not enough on its own for the
+  sheet below: `wa-dialog` focuses `[autofocus]` or *itself* on the
+  frame after `showModal()`, and it cannot see the first menu item to
+  prefer it, because the panel is slotted through `menu-surface` and
+  the dialog's own `querySelector` stops at the `<slot>`. The first
+  attempt therefore *succeeds* and is then overwritten, which no
+  amount of waiting fixes — so the surface announces `menu-shown` when
+  it has settled and `MenuKeyboard.refocus()` re-asserts.
 - **Focus is only taken back if the menu had it.** A click elsewhere
   closes the menu too, and pulling focus to the row the user
   right-clicked a moment ago is worse than leaving it.
@@ -1376,6 +1385,69 @@ against the real components:
   moving focus without setting it leaves the highlight on whichever
   item the mouse last touched.
 
+**And a menu is drawn where it fits: a popup on a desktop, a bottom
+sheet on a phone** (#60). `components/menu-surface/` is that one
+decision. The host renders the panel it always rendered and slots it
+into whichever surface is up, so `ContextMenuController` still drives
+`.active` and `.anchor` as though it were talking to a `wa-popup`, and
+fourteen call sites changed one tag name each and nothing else.
+
+**It is a correctness fix, not a taste one, and the failure was
+measured on the device rather than inferred.** Chrome 113 has no
+Popover API, so `wa-popup` takes its own documented fallback and
+positions with `strategy: "fixed"`; `.main-panel` carries
+`contain: layout style paint`, and paint containment *clips* fixed
+descendants. On the reference device the main panel spans 0-318 of a
+439px viewport while the open menu spanned 191-401 — three of its seven
+items cut off, with no way to reach them. `showModal()` is Chrome 37
+and uses the real top layer, so a dialog is immune by construction.
+
+Six things about it are load-bearing.
+
+**"Dialogs are fine" needed checking, because every other dialog in
+this app is mounted in `index.html`** — outside `.main-panel` — so it
+was not evidence about one opened from inside a view. A probe dialog
+appended to `track-list`'s shadow root paints to y=439, over the mini
+player and the tab bar, with the contained ancestor still in place. A
+top-layer element's containing block is the viewport, contained
+ancestor or not.
+
+**The sheet has to un-do the UA stylesheet.** A native `<dialog>`
+carries `max-width: calc(100% - 6px - 2em)` and `margin: auto`, which
+drew a 354px panel floating in the middle of a 424px screen.
+`max-width: none` plus explicit margins is what makes it a sheet.
+
+**The row sizing lives in `contextMenuStyles`, not in the component.**
+The panel is the *host's* light DOM — it stays in the host's shadow
+root, so only the host's stylesheet can reach it. `menu-surface` puts
+`data-sheet` on the panel and that shared stylesheet does the rest,
+which is how fourteen menus went from 29px rows to 48px ones in one
+edit.
+
+**A dismissal has to travel back.** `wa-dialog` closes itself on
+Escape, which would leave the controller believing the menu is open —
+and the failure mode is not a stuck sheet but the *next* long-press
+doing nothing, which reads as the gesture breaking. `menu-dismiss` is
+that signal; the three surfaces that do not use `ContextMenuController`
+bind it themselves.
+
+**The playlist submenu is a sheet too, and it had to be.** It is a
+`placement="right-start"` flyout, and making the menu full-width moved
+its anchor — measured at x −182 to 0, entirely off-screen, so "Add to
+Playlist" led nowhere. It stacks as a second sheet over the first,
+which is also why `menu-shown` does not re-assert focus while the
+submenu is open.
+
+**And which call sites exist is swept, not remembered.** A thirteenth
+menu written as a bare `<wa-popup>` works perfectly in every tier here
+and is clipped on the device, so `menu-surface.test.ts` reads the
+source and fails on one outside a three-file allowlist —
+`menu-surface` itself, `job-indicator` (in `.top-bar`, which no
+ancestor contains — the contrast that proved the diagnosis on #62) and
+`now-playing`'s cover preview (a hover affordance, which a touch device
+never opens). **The sweep found two of the fourteen**; twelve were
+converted by hand.
+
 **And a menu opens from a finger, through the event it already has.**
 `utils/long-press.ts` is one document-capture listener installed once
 from `index.ts`: a touch that holds still for 500 ms dispatches a
@@ -1390,6 +1462,42 @@ vary) wins, ours being told from theirs by **identity** rather than
 that ends the gesture is swallowed, keyed on the gesture rather than on
 a time window so the first tap on the menu it opened is not eaten too.
 
+**A control revealed by `:hover` is gated on the device having hover,
+and which way round depends on whether it is the only route to its
+action.** The gate itself is not optional: a touch long-press
+synthesises a hover state in the WebView, so every one of these flashed
+into view during the 500 ms hold above — a control appearing because
+the user was reaching for a different one. Where the action is reachable
+another way the control is **absent** on a touch device (the home card's
+play button, #68; the queue row's remove, which the row's bottom-sheet
+menu carries since #60), and that is `display: none` outside
+`(hover: hover) and (pointer: fine)` rather than `opacity: 0` or
+`visibility: hidden`, both of which leave a button holding its hit area
+and its place in the accessibility tree. Where the control is the
+**only** route it is instead always visible under
+`@media not all and (hover: hover)` — `track-details`'s cover-art
+overlay and remove, `shortcut-capture`'s reset (#137) — because hiding
+it takes the action away entirely.
+
+**Always-visible is not the same as always-in-the-way.** The cover-art
+overlay is `inset: 0` at 50% black, which is fine as a hover state and
+is not fine as the permanent appearance of the artwork being edited —
+and it is only a *hint*, since `.cover-art-edit` carries the click and
+tapping the art always worked. Off hover it becomes a corner chip in
+the remove button's own language. The × beside it stays full-size,
+because that one really is the only route to its action.
+
+One thing to know before checking either: **no *committed* tier renders
+as a touch device.** CDP's `Emulation.setEmulatedMedia` does not reach
+the component tier's iframe, and the e2e projects are Desktop Chrome
+and Desktop Safari, neither of which has touch — a Playwright project
+using a mobile descriptor would report `hover: none`, so this is a
+choice not to carry one rather than a thing that cannot be done. So
+`hover-affordance.test.ts` asserts the *parsed stylesheet* — which rule
+sits inside which media query — and says so; the regression it exists
+for is someone hoisting a rule out of its query as a tidy-up, which
+nothing on a desktop renders differently.
+
 Three lists had no focused row to open a menu *from* — the queue panel
 and both playlist detail views — and gained a roving tab stop through
 `utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
@@ -1837,6 +1945,33 @@ every desktop button from 33×21 to 36×24, silently. The sizes are
 asserted as `'33x21'` rather than as a range, because the regression
 was three pixels.
 
+**What that bar lost is how far through the song it is, and
+`<player-progress-line>` is where it went** (#58). Plan 016 B2 took the
+seek bar off the phone's transport, so the one thing a mini player is
+expected to say without being opened had nowhere left to be said. It is
+a 2px line on the border between the mini player and the tab bar: the
+**shell's** element and its own `auto` grid row between `bottom-bar`
+and `bottom-nav`, because those two are separate components and either
+one drawing it means reaching into the other's box for two pixels.
+
+Four things about it are load-bearing. **It never counts** — the fill is
+`scaleX()` off the same `PlaybackPositionChanged` the seek bar renders,
+with the same `trackChangeId` and `seq` guards and an interval that is
+stopped and restarted by every report, which is the rule that exists
+because a local clock drifted 30 s away across four keyboard seeks.
+**It is not a control and cannot become one**: `aria-hidden` on the host
+and `pointer-events: none` throughout, because Now Playing's seek bar
+is what announces the position and a 2px strip on the top edge of the
+tab bar is exactly where a thumb aiming at a tab lands. **It renders
+nothing above 600px**, from `matchMedia` rather than a media query, for
+`job-band`'s reason plus one of its own — a stylesheet cannot stop a
+1 Hz interval running for the life of every desktop session about a
+line nobody can see. And **its phone rule sits at the foot of
+`index.css`, beside `job-band`'s**, not in the phone block above: a
+media query adds no specificity, so a `display: block` written before
+the `display: none` that takes it out of the desktop grid loses to it
+and the line never appears at any width, silently.
+
 **900 is the worst desktop width, not the 800×600 minimum.** The
 sidebar collapses to icons *below* 900, so the main panel is 843px at
 899 and 700px at 900 — the narrowest content area any desktop width
@@ -1934,9 +2069,26 @@ one that closes the queue — the reported defect moved one press later,
 which looks exactly like a press that did nothing.
 
 **And the way out is 44px on a phone.** With the panel spanning the
-whole width the scrim has no uncovered pixels at all, so the close
-button is the only pointer route out of a full-screen surface; it was
-**25×21px**.
+whole width there is no scrim there at all, so the close button is the
+only pointer route out of a full-screen surface; it was **25×21px**.
+
+**The scrim is drawn only where it can be tapped** (#171). Below 600px
+`.panel-content` is `width: 100%`, so the scrim sat entirely underneath
+an opaque panel — measured at 424×439, host, panel and scrim all
+424×318 — dimming nothing and dismissing nothing while wearing
+`cursor: pointer`. #24's tap-outside-to-close cannot exist on a surface
+with no outside, and the screen above is what answers it instead: back,
+and a 44px close button. The alternative — a gutter, which is the
+drawer pattern — was declined, because it buys the affordance by taking
+width off a full-screen surface on a 424px viewport. Two things about
+it are load-bearing. Its **existence** is `matchMedia`, not
+`display: none`, on `job-band`'s rule: a hidden scrim is still an
+element carrying the dismissal handler. And **the 600–899 band is
+untouched**, where the panel is a 320px column of a wider content area
+and the scrim has real uncovered pixels — which is why the e2e half
+asserts *absence* at 424×439 rather than clicking, since a phone-width
+case that clicks the scrim's centre hits the panel and passes on the
+broken build.
 
 What this does **not** fix is `page-header` overflowing on its own:
 at 900×600 "New Smart Playlist" is still clipped to 114 of 162px with
@@ -1968,6 +2120,54 @@ toggled from `index.ts` would be a second expression of the same fact.
 The view therefore carries its own queue button, because that button
 lives in the bar it hides.
 
+**And below 500px of height its art and its names share a row** (#51).
+The stacked arrangement's budget is fixed — 48px of header, 143px of
+transport since #64, 78px of names, 68px of padding and gaps — so the
+art gets `height - 386`, which at the reference device's 424x439 is
+**53px**: the one thing a Now Playing screen exists to show, smallest
+on it. #172 named the two ways out and this is the second, because the
+first — a floor on the art with the block scrolling — scrolls the
+transport off the bottom, and *controls never scroll off* is #51's own
+Direction and plan 018's promise. Sideways the art is bounded by the
+row's height instead of by the column's leftover: **53px to 143px**,
+measured on the device, nothing scrolling, the transport untouched.
+
+Three things about it are load-bearing.
+
+**500 is where the two layouts cross rather than a round number.** In a
+row the art is `height - 296` and the names get what is left of 392px,
+so the names hold 176px at exactly 500 and less above it; stacked, the
+art is `height - 386`, which passes 176px at 562. Below 500 the row is
+the bigger art *and* the readable one — above it the column is, which
+is why a tall phone keeps the arrangement it has. It is keyed on height
+alone and not on the phone's width, because it answers vertical room: a
+900x450 window has the same problem and the same fix.
+
+**The art was not a small square, it was a crop, and that was never
+only the phone.** `aspect-ratio` is specified not to re-derive the
+width when `max-height` clamps the height — unlike an intrinsic ratio,
+which is preserved under both bounds — so a definite `width: min(100%,
+60vh)` kept its width while the height was clipped, and `object-fit:
+cover` cropped a square cover into the band: **264x53** on the device.
+The leftover exceeds the width only above ~843px of viewport, so every
+height from ~500 to ~843 drew one too. `max-width`/`max-height: 100%`
+with `width`/`height: auto` is the fix and is the replaced-element
+path; it also never upscales past the natural size, and the largest
+tier `saveCoverArt` keeps is 400px, so nothing is lost.
+
+**The placeholder needs its own rule, and a non-replaced box cannot
+express this one.** With no intrinsic size, auto/auto collapses it to
+its icon (13x58, measured). It is driven from the height instead, with
+`min-width: 0` because a flex item's automatic minimum is its content —
+without it the icon's width becomes a floor the moment the row is
+shorter than the icon, which is exactly what a job band does to this
+screen. And since whichever max clamps does not re-derive the other, a
+height-driven box goes **380x484** on a tall phone; `max-height:
+calc(100vw - 2rem)` closes it, which is sound here for the reason
+`60vh` was not — this is a phone-width detail view, so its content box
+really is the viewport less the host's gutters, and it is a *max*, so
+the failure mode is a square bounded early rather than a crop.
+
 **The playing row is a shape, not a hue.** `track-list` and
 `queue-panel` draw a `::before` triangle in each row's own left
 padding, plus `aria-current` — before, both rows were a background tint
@@ -2417,6 +2617,31 @@ missing half; `catalogFailed` is the only route to `unavailable` now,
 and the timer is a 60 s backstop for a genuine hang rather than the
 verdict.
 
+**On a phone that page is one scroll container, and the header is in
+it** (#66). It was built as a fixed header over a scrolling tracklist,
+which is the desktop arrangement: at the reference device's 424×439 the
+header owned **253 of the panel's 318px** and the list scrolled inside
+the 64 that were left. Below 600px the *host* is the scroller and
+`.content` stops being one, so the whole page moves together — which is
+only available because this tracklist is plain DOM rather than a
+virtualizer, and because `.main-panel > *` already gives the host a
+definite height.
+
+Three things about it are load-bearing. **Another `min-width: 0` was
+not the fix**: `.album-info` carries one and was shrinking exactly as
+asked, to 112px beside a 200px cover — so the title drew as `G…` and
+"Shuffle album" ended at x=443 inside a 424px box, clipped by the
+component's own `overflow: hidden` and reachable by no gesture. A row
+with a fixed-size sibling has to **stack** at that width, or the column
+that must shrink has nothing to be wide with. **`layout-overflow.spec.ts`
+cannot see any of this** — `body.scrollWidth` equalled the viewport
+throughout, because the overflow was *inside* a component; the spec
+measures each header control against the host's own box, which is
+`top-bar-fit.spec.ts`'s shape for the same reason. And **the phone block
+is last in the stylesheet**, on `index.css`'s rule: a media query adds
+no specificity, so written above the plain rules it overrides every
+declaration in it is silently dead.
+
 **Activating a row plays the list the row is in, from that row.** A
 double-click — and Play on a single row's context menu — queues the
 list as *displayed* with `startIndex` on that row, not a queue of one
@@ -3372,6 +3597,27 @@ android-inspect` forwards the WebView's devtools socket and `make
 android-eval` asks the real page — raw CDP, because `connectOverCDP`
 calls `Browser.setDownloadBehavior` and a WebView refuses it.
 
+**One of those gaps is checked rather than remembered.** A nested rule
+whose selector starts with an element name is not a parse error anyone
+would notice on 113 — the rule simply does not exist, there and nowhere
+else, which is how the bottom bar's `text-overflow: ellipsis` came to
+have never truncated on the device. `make css-check`
+(`frontend/scripts/check-css-nesting.mjs`, a pre-commit hook and a CI
+step) fails on one, over every `frontend/*.css` and the `css` literals
+alike — a glob rather than `index.css` by name, because the hook fires
+on `frontend/**/*.{ts,css}` and a sweep that names one file goes green
+over a stylesheet it never opened — and
+says the fix is a leading `&` — valid in both syntaxes, so no nested
+rule here has a reason to omit it. Two things it has to get right, and
+both follow from asking whether a *style* rule is anywhere above rather
+than what the immediate parent is: `@media (…) { bottom-nav { … } }` at
+the top level is an ordinary rule and is the majority of what a regex
+over the file would report, while the same rule one level inside
+`.bar { @media (…) { … } }` is nested and is flagged. The check is the
+cheap version of the answer; a build-time downlevel (Lightning CSS
+targeting 113) would fix the class permanently and is a dependency and
+a build step rather than twenty lines.
+
 `build/config.yml`'s `version` is the
 *metadata* version and is not what the app reports — `main.version` is
 stamped at link time from the packaging recipe's git-derived version.

Makefile

@@ -172,12 +172,17 @@ ui-setup: ## Install the Vitest browser provider's own Chromium (once)
 bindings-check: ## Fail if the generated bindings are stale
 	@./scripts/bindings-check.sh
 
+# Two CSS traps that report a long way from their cause, or not at all.
 # A backtick inside a comment in a css`` literal ends the literal, and
 # what you get back is a type error about CSSResult, or every test in
-# the suite failing to import. Four sessions, three plans. Instant.
+# the suite failing to import. Four sessions, three plans. And a nested
+# rule starting with an element name is dropped by the device's
+# Chrome 113 in silence -- no tier here runs an engine that can see it.
+# Instant.
 .PHONY: css-check
-css-check: ## Fail if a css`` literal was ended early by a backtick in a comment
+css-check: ## Fail on a css`` literal ended early by a backtick, or a nested rule needing an &
 	@cd frontend && node scripts/check-css-literals.mjs
+	@cd frontend && node scripts/check-css-nesting.mjs
 
 # .pi/ and CLAUDE.md document commands, and a doc that documents a
 # command wrongly is worse than no doc: an agent runs it confidently.

e2e/specs/phone-album-page.spec.ts

@@ -0,0 +1,209 @@
+import { test, expect } from '../support/fixtures.js';
+import type { Page } from '@playwright/test';
+
+/**
+ * The album page on a phone (#66).
+ *
+ * Two faults, and neither was visible to `layout-overflow.spec.ts`:
+ * that spec asserts the *shell* needs no sideways scrolling, and the
+ * shell was correct throughout — `body.scrollWidth === clientWidth`
+ * while `explore-album-details` itself measured 443 inside a 424px box
+ * and clipped two of the album's three primary actions with its own
+ * `overflow: hidden`. So the measurement here is **per control against
+ * the component's box**, which is the same shape `top-bar-fit.spec.ts`
+ * needed for the same reason.
+ *
+ * The other half is the scroll: the page was a fixed header over a
+ * scrolling tracklist, so at the reference device's 424x439 the header
+ * owned 253 of the panel's 318px and the list scrolled in the 64 that
+ * were left. It is one scroll container below 600px, which is a
+ * property of the *host* rather than of `.content`.
+ *
+ * The engine is the caveat this tier cannot close: the reference device
+ * renders in Chrome 113 and this is Chromium/WebKit. A flex direction
+ * and a scroll container are nowhere near that engine's documented gaps
+ * (relaxed nesting, the Popover API, `light-dark()`), but "it renders
+ * at that size in Chromium" is not evidence about the phone.
+ */
+
+/** The phone this was measured on, in CSS pixels. */
+const DEVICE = { width: 424, height: 439 };
+
+const details = (page: Page) => page.locator('explore-album-details');
+
+/** The page's own boxes, read from inside its shadow root. */
+const geometry = (page: Page) =>
+  page.evaluate(() => {
+    const host = document.querySelector('explore-album-details');
+    const sr = host?.shadowRoot;
+
+    if (!host || !sr) return null;
+
+    const box = (sel: string) => {
+      const el = sr.querySelector(sel);
+
+      if (!el) return null;
+
+      const r = el.getBoundingClientRect();
+
+      return { width: Math.round(r.width), right: Math.round(r.right) };
+    };
+
+    const content = sr.querySelector('.content');
+
+    return {
+      hostWidth: host.clientWidth,
+      hostScrollWidth: host.scrollWidth,
+      // The host is the scroller below 600px, so the page is taller
+      // than its box rather than the tracklist being a window inside it.
+      hostScrolls: host.scrollHeight > host.clientHeight,
+      contentScrolls: content
+        ? content.scrollHeight > content.clientHeight
+        : null,
+      header: box('.album-header'),
+      play: box('[data-testid="album-play"]'),
+      shuffle: box('[data-testid="album-shuffle"]'),
+      queue: box('[data-testid="album-queue"]'),
+      title: (() => {
+        const el = sr.querySelector('.album-title-text');
+
+        return el ? el.scrollWidth <= el.clientWidth + 1 : null;
+      })(),
+    };
+  });
+
+test.describe('the album page on a phone', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await openFirstAlbum(app);
+  });
+
+  test.afterEach(async ({ app }) => {
+    await app.setViewportSize({ width: 1440, height: 900 });
+    await app.getByTestId('nav-tracks').click();
+  });
+
+  test('keeps every action inside its own box', async ({ app }) => {
+    const geo = await geometry(app);
+
+    expect(geo).not.toBeNull();
+    // "Shuffle album" ended at x=443 in a 424px component and could not
+    // be reached by any gesture; "Add to queue" at 440.
+    for (const action of ['play', 'shuffle', 'queue'] as const) {
+      expect(
+        geo?.[action],
+        `${action} is rendered`,
+      ).not.toBeNull();
+      expect(
+        geo?.[action]?.right ?? 0,
+        `${action} ends inside the page`,
+      ).toBeLessThanOrEqual(geo?.hostWidth ?? 0);
+    }
+
+    expect(geo?.hostScrollWidth).toBe(geo?.hostWidth);
+    expect(geo?.header?.width).toBe(geo?.hostWidth);
+  });
+
+  test('gives the title the row rather than one glyph of it', async ({
+    app,
+  }) => {
+    // `.album-info` was squeezed to 112px beside the art, so an album
+    // called *Glass Harbour* drew as `G…`. It carries `min-width: 0`
+    // and was shrinking as asked — the row had to stack.
+    expect(await geometry(app).then((g) => g?.title)).toBe(true);
+  });
+
+  test('scrolls as one page, with the header scrolling away', async ({
+    app,
+  }) => {
+    const before = await geometry(app);
+
+    expect(before?.hostScrolls).toBe(true);
+    expect(before?.contentScrolls).toBe(false);
+
+    const headerTop = () =>
+      app.evaluate(
+        () =>
+          document
+            .querySelector('explore-album-details')
+            ?.shadowRoot?.querySelector('.album-header')
+            ?.getBoundingClientRect().top ?? 0,
+      );
+
+    expect(await headerTop()).toBeGreaterThanOrEqual(0);
+
+    // A wheel gesture, not `scrollTop`: `overflow: hidden` still permits
+    // programmatic scrolling, so a probe that assigns it passes on the
+    // build this exists to fail.
+    await details(app).hover();
+    await app.mouse.wheel(0, 250);
+
+    await expect.poll(headerTop).toBeLessThan(-100);
+  });
+
+  test('is the desktop arrangement again above the breakpoint', async ({
+    app,
+  }) => {
+    await app.setViewportSize({ width: 1024, height: 800 });
+
+    // The same element, re-laid-out: one component with two
+    // arrangements, not a phone-only copy.
+    await expect
+      .poll(async () => (await geometry(app))?.hostScrolls)
+      .toBe(false);
+
+    const arrangement = await app.evaluate(() => {
+      const sr = document.querySelector('explore-album-details')?.shadowRoot;
+      const header = sr?.querySelector('.album-header');
+      const content = sr?.querySelector('.content');
+
+      return {
+        direction: header ? getComputedStyle(header).flexDirection : null,
+        contentOverflow: content ? getComputedStyle(content).overflowY : null,
+      };
+    });
+
+    expect(arrangement.direction).toBe('row');
+    expect(arrangement.contentOverflow).toBe('auto');
+  });
+});
+
+/** Albums → the second card, which navigates to the album page. */
+async function openFirstAlbum(app: Page): Promise<void> {
+  // Below 600px the sidebar is gone; the tab bar is the navigation.
+  await app.getByTestId('tab-albums').click();
+  await expect(app.getByTestId('main-content')).toHaveAttribute(
+    'data-active-view',
+    'albums',
+  );
+
+  await expect.poll(() => cardCount(app)).toBeGreaterThan(1);
+
+  // Dispatched rather than clicked: the card lives in a virtualizer
+  // inside a shadow root, and Enter expands the dropdown instead.
+  await app.evaluate(() => {
+    document
+      .querySelector('cover-grid')
+      ?.shadowRoot?.querySelectorAll('.album-card')[1]
+      ?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, composed: true }),
+      );
+  });
+
+  await expect(app.getByTestId('main-content')).toHaveAttribute(
+    'data-active-view',
+    'explore-album-details',
+  );
+  await expect(
+    details(app).locator('[data-testid="album-play"]'),
+  ).toBeVisible();
+}
+
+async function cardCount(app: Page): Promise<number> {
+  return app.evaluate(
+    () =>
+      document
+        .querySelector('cover-grid')
+        ?.shadowRoot?.querySelectorAll('.album-card').length ?? 0,
+  );
+}

e2e/specs/phone-now-playing.spec.ts

@@ -0,0 +1,283 @@
+import { test, expect } from '../support/fixtures.js';
+
+/**
+ * Now Playing on a short screen (#51).
+ *
+ * #51 asks for a layout that "survives" ~424x439 with the controls
+ * never scrolling off. #172 measured why it did not — the stacked
+ * layout's budget is fixed, so the art gets whatever is left, and that
+ * was 39px before #64 and 53px after it.
+ *
+ * **Two separate claims are asserted here, and only one of them is
+ * about the phone.**
+ *
+ * The first is that the art is *square*. It was not: `aspect-ratio` is
+ * specified not to re-derive the width when `max-height` clamps the
+ * height, so the art was drawn as a letterbox band and `object-fit:
+ * cover` cropped the cover to it — 264x53 on the reference device. The
+ * leftover only exceeds the width above ~843px of viewport, so this
+ * was every height from ~500 to ~843 as well: most phones, and any
+ * short window. That is ordinary CSS rather than a Chrome 113 quirk,
+ * so this tier can see it, and the heights below are chosen to cover
+ * the range rather than the one device.
+ *
+ * The second is the reflow: below 500px the art and the names sit side
+ * by side, which is what takes the art from 53px to 143px. That is
+ * asserted as a *relation between boxes* — the art beside the names,
+ * not above them — because the pixel count is a consequence of the
+ * arrangement and would pin this file to one device's chrome.
+ *
+ * **What this tier cannot see** is the device's engine: CI's Chromium
+ * and WebKit are current, and #60's clipping showed what that costs.
+ * Nothing here depends on Chrome 113 behaviour — the sizing rules were
+ * checked against the device itself, at column heights of 288, 300,
+ * 451, 600 and 800, and the numbers are on #51.
+ */
+type Page = import('@playwright/test').Page;
+
+/** The reference device's real viewport. */
+const DEVICE = { width: 424, height: 439 };
+
+/**
+ * A tall phone, above the reflow's 500px. Roughly a Pixel 7, which is
+ * #51's other named device and was not attached — so what is checked
+ * here is the layout it *should* get, not that device.
+ */
+const TALL_PHONE = { width: 412, height: 869 };
+
+/** Inside the crop's old range and above the reflow: a short window. */
+const SHORT_WINDOW = { width: 390, height: 700 };
+
+/**
+ * The height the layout reflows at. Written down once here because the
+ * specs have to know which arrangement to *wait* for, not only which
+ * to assert.
+ */
+const REFLOW_AT = 500;
+
+/** Put a track in the player, so the view has art and names to lay out. */
+async function stageATrack(page: Page): Promise<void> {
+  await page.evaluate(async () => {
+    const tracks = (await window.__yjEvents.call(
+      'library.Library.GetTracks',
+      [0],
+      10_000,
+    )) as { FilePath: string }[];
+
+    await window.__yjEvents.call(
+      'queue.Queue.SetQueue',
+      [tracks.slice(0, 4).map((t) => t.FilePath), 0, false, { type: '', id: 0, label: '' }],
+      10_000,
+    );
+  });
+}
+
+/** Open the full-screen view and wait for the shell to say so. */
+async function openNowPlaying(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    document.dispatchEvent(
+      new CustomEvent('navigate', {
+        detail: { view: 'now-playing' },
+        bubbles: true,
+      }),
+    );
+  });
+
+  await expect(page.getByTestId('main-content')).toHaveAttribute(
+    'data-active-view',
+    'now-playing',
+  );
+
+  // The attribute is the shell's bookkeeping and lands before the view
+  // has a track, so measuring on it alone races the first layout --
+  // which showed up as a 60x5 art on the first spec of a cold run.
+  //
+  // Waiting for a non-zero box is not enough on its own either: a
+  // previous test leaves the *other* arrangement on screen, and a
+  // stale column satisfies "has a size" perfectly. So the wait is for
+  // the arrangement this viewport should have, which is the thing
+  // every assertion below depends on. Found by this file passing one
+  // test at a time and failing in file order.
+  const wantRow = (page.viewportSize()?.height ?? 0) <= REFLOW_AT;
+
+  await page.waitForFunction(
+    (row: boolean) => {
+      const v = document.querySelector('now-playing-view');
+      const stack = v?.shadowRoot?.querySelector('.stack');
+      const el = v?.shadowRoot?.querySelector('.art img, .art .placeholder');
+      const t = v?.shadowRoot?.querySelector('.transport');
+
+      if (!el || !t) return false;
+
+      // A build with no `.stack` at all is the one before this change,
+      // and the squareness assertions are still meaningful against it
+      // -- so this waits for the arrangement only where there is one to
+      // wait for. Otherwise reverting the component to check that these
+      // tests bite produces eight timeouts instead of the measurements
+      // that make the case.
+      if (stack) {
+        const dir = getComputedStyle(stack).flexDirection;
+
+        if (dir !== (row ? 'row' : 'column')) return false;
+      }
+
+      const r = el.getBoundingClientRect();
+
+      return r.width > 0 && r.height > 0 && t.getBoundingClientRect().height > 0;
+    },
+    wantRow,
+  );
+}
+
+/**
+ * The boxes this file reasons about, read in one evaluate.
+ *
+ * It reaches into the view's shadow root rather than using locators
+ * because the question is geometric — where these boxes are *relative
+ * to each other* — and a testid per edge would be four locators and
+ * four round trips to say one thing.
+ */
+async function boxes(page: Page) {
+  return page.evaluate(() => {
+    const v = document.querySelector('now-playing-view');
+
+    if (!v || !v.shadowRoot) return null;
+
+    const rect = (sel: string) => {
+      const el = v.shadowRoot!.querySelector(sel);
+
+      if (!el) return null;
+
+      const r = el.getBoundingClientRect();
+
+      return {
+        left: r.left, right: r.right, top: r.top, bottom: r.bottom,
+        width: r.width, height: r.height,
+      };
+    };
+
+    return {
+      // Whichever of the two the track has; both carry the sizing.
+      art: rect('.art img') ?? rect('.art .placeholder'),
+      artBox: rect('.art'),
+      stack: rect('.stack'),
+      meta: rect('.meta'),
+      transport: rect('.transport'),
+      scrollHeight: v.scrollHeight,
+      clientHeight: v.clientHeight,
+    };
+  });
+}
+
+test.describe('Now Playing survives a short screen', () => {
+  test.beforeEach(async ({ app }) => {
+    await stageATrack(app);
+  });
+
+  /**
+   * The crop, at four heights spanning the range it covered. This is
+   * the assertion that fails on the build before this change: at
+   * 424x439 the art measured 264x53.
+   */
+  for (const vp of [DEVICE, SHORT_WINDOW, TALL_PHONE, { width: 900, height: 500 }]) {
+    test(`draws the art square at ${vp.width}x${vp.height}`, async ({ app }) => {
+      await app.setViewportSize(vp);
+      await openNowPlaying(app);
+
+      const b = await boxes(app);
+
+      expect(b, 'now-playing-view did not mount').not.toBeNull();
+      expect(b!.art, 'neither art nor placeholder rendered').not.toBeNull();
+
+      const { width, height } = b!.art!;
+
+      expect(width, 'the art has no width').toBeGreaterThan(0);
+      // One pixel of slack for sub-pixel layout, and no more: the
+      // defect this guards was a 5:1 band.
+      expect(
+        Math.abs(width - height),
+        `art is ${Math.round(width)}x${Math.round(height)}, not square`,
+      ).toBeLessThanOrEqual(1);
+    });
+  }
+
+  /**
+   * The promise #51 states and plan 018's matrix repeats. A floor on
+   * the art with the block scrolling was the other option on #172 and
+   * this is why it was not taken.
+   */
+  test('never scrolls the transport off the bottom', async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await openNowPlaying(app);
+
+    const b = await boxes(app);
+
+    expect(b!.transport!.bottom).toBeLessThanOrEqual(DEVICE.height);
+    expect(
+      b!.scrollHeight,
+      'the view scrolls, so the transport can be moved off screen',
+    ).toBeLessThanOrEqual(b!.clientHeight + 1);
+  });
+
+  /**
+   * The reflow itself, as a relation rather than a measurement: below
+   * 500px the names are *beside* the art, above it they are below.
+   */
+  test('puts the names beside the art below 500px', async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await openNowPlaying(app);
+
+    const b = await boxes(app);
+
+    expect(
+      b!.meta!.left,
+      'the names are not to the right of the art',
+    ).toBeGreaterThanOrEqual(b!.artBox!.right - 1);
+  });
+
+  test('keeps the names below the art on a tall phone', async ({ app }) => {
+    await app.setViewportSize(TALL_PHONE);
+    await openNowPlaying(app);
+
+    const b = await boxes(app);
+
+    expect(
+      b!.meta!.top,
+      'the names are not below the art',
+    ).toBeGreaterThanOrEqual(b!.artBox!.bottom - 1);
+  });
+
+  /**
+   * What the reflow actually does, stated as a mechanism rather than
+   * as a number: in a row the art is bounded by the row's *height*,
+   * so it fills it — where in a column it is the leftover after the
+   * names, which is what made it 53px.
+   *
+   * **The pixel count is deliberately not asserted here.** Two drafts
+   * tried. The first compared the art against the column's leftover
+   * computed from the boxes on screen and passed on the broken build,
+   * because the subtraction goes negative when the names are taller
+   * than the art — precisely the defect. The second put a floor of
+   * 100px on it, passed locally at 114 and **failed in CI at 64**: this
+   * app is long-lived, so a job staged by an earlier spec is still on
+   * screen, and the volume control renders here where it does not on
+   * Android. Both are chrome above and below this view, and both move
+   * the leftover. A test that asserts how much room CI happened to
+   * have is a test about the runner.
+   *
+   * The device numbers — 53px to 143px — are on #51, measured there,
+   * which is the only tier that can honestly produce them.
+   */
+  test('fills the row with the art rather than the leftover', async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await openNowPlaying(app);
+
+    const b = await boxes(app);
+
+    expect(b!.stack, 'there is no row to fill').not.toBeNull();
+    expect(
+      Math.abs(b!.artBox!.height - b!.stack!.height),
+      'the art does not fill the row, so it is still a leftover',
+    ).toBeLessThanOrEqual(1);
+  });
+});

e2e/specs/phone-progress-line.spec.ts

@@ -0,0 +1,136 @@
+import {
+  test,
+  expect,
+  callBinding,
+  resetEvents,
+  waitForEvent,
+  LONG_TRACK,
+  NO_QUEUE_SOURCE,
+} from '../support/fixtures.js';
+import type { Page } from '@playwright/test';
+
+/**
+ * The phone's progress line (#58).
+ *
+ * The component tier already pins what the line *says* — that it
+ * renders the backend's reported position and never a count of its own.
+ * What only a real shell can answer is **where it is**: the issue asks
+ * for a line on the border between the mini player and the tab bar, and
+ * "on the border" is two adjacencies in a grid that no component-level
+ * render has around it.
+ *
+ * It also asserts the line is not there on a desktop, which is the
+ * other half of the same fact: above 600px there is no tab bar for it
+ * to sit on the border of, and the bar carries a real seek bar.
+ */
+type Rect = { x: number; y: number; width: number; height: number };
+
+/** The reference device's real viewport. */
+const DEVICE = { width: 424, height: 439 };
+const DESKTOP = { width: 1280, height: 800 };
+
+async function rectOf(app: Page, selector: string): Promise<Rect | null> {
+  return app.evaluate((sel) => {
+    const el = document.querySelector(sel);
+
+    if (!el) return null;
+
+    const r = el.getBoundingClientRect();
+
+    return { x: r.x, y: r.y, width: r.width, height: r.height };
+  }, selector);
+}
+
+/**
+ * Put the 90-second fixture on and wait for the first position report.
+ *
+ * The long track rather than any track: every other fixture is 2-6
+ * seconds, which is shorter than the time this spec takes to measure
+ * three rectangles.
+ */
+async function play(app: Page): Promise<void> {
+  const tracks = await callBinding<{ FilePath: string; TrackName: string }[]>(
+    app,
+    'library.Library.GetTracks',
+    [0],
+  );
+
+  // `TrackName`, not `Title`: that is what the library model calls it.
+  const long = tracks.find((t) => t.TrackName === LONG_TRACK);
+
+  expect(long, `no fixture track named ${LONG_TRACK}`).toBeTruthy();
+
+  await callBinding(app, 'queue.Queue.Clear');
+  await resetEvents(app);
+  await callBinding(app, 'queue.Queue.SetQueue', [
+    [long!.FilePath],
+    0,
+    false,
+    NO_QUEUE_SOURCE,
+  ]);
+  await waitForEvent(app, 'QueueChanged');
+  await callBinding(app, 'queue.Queue.Play');
+  await waitForEvent(app, 'PlaybackPositionChanged', { timeoutMs: 15_000 });
+}
+
+test.describe('the progress line sits on the border between the bars', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await play(app);
+  });
+
+  /*
+   * Every test here starts a LONG_TRACK and the suite is workers: 1,
+   * fullyParallel: false against one long-lived app — so without this
+   * the four phone-* specs that follow alphabetically inherit a playing
+   * queue. phone-transport.spec.ts records where that lesson came from:
+   * the fault first showed up as a flake in a spec about something else.
+   */
+  test.afterEach(async ({ app }) => {
+    await callBinding(app, 'queue.Queue.Clear').catch(() => {
+      /* already empty */
+    });
+    await app.setViewportSize(DESKTOP);
+  });
+
+  test('spans the width, between the mini player and the tab bar', async ({
+    app,
+  }) => {
+    const line = await rectOf(app, 'player-progress-line');
+    const bar = await rectOf(app, '.bottom-bar');
+    const nav = await rectOf(app, 'bottom-nav');
+
+    expect(line, 'no progress line on the phone').not.toBeNull();
+    expect(bar).not.toBeNull();
+    expect(nav).not.toBeNull();
+
+    // A border, not a band: 2px, the full width, and touching both.
+    expect(line!.height).toBeCloseTo(2, 0);
+    expect(line!.width).toBeCloseTo(bar!.width, 0);
+    expect(line!.y).toBeCloseTo(bar!.y + bar!.height, 0);
+    expect(nav!.y).toBeCloseTo(line!.y + line!.height, 0);
+  });
+
+  /**
+   * It is 2px on the top edge of the tab bar, which is exactly where a
+   * thumb aiming at a tab lands. A line that sometimes seeks is worse
+   * than one that never does, so it must take no part in hit testing
+   * at all.
+   */
+  test('takes no taps', async ({ app }) => {
+    const line = await rectOf(app, 'player-progress-line');
+
+    const hit = await app.evaluate(
+      ({ x, y }) => document.elementFromPoint(x, y)?.tagName ?? '',
+      { x: line!.x + line!.width / 2, y: line!.y + 1 },
+    );
+
+    expect(hit).not.toBe('PLAYER-PROGRESS-LINE');
+  });
+
+  test('is not there on a desktop', async ({ app }) => {
+    await app.setViewportSize(DESKTOP);
+
+    await expect(app.locator('player-progress-line')).toBeHidden();
+  });
+});

e2e/specs/queue-as-a-screen.spec.ts

@@ -179,8 +179,8 @@ test.describe('the queue is a screen where it covers the content', () => {
    */
 
   /**
-   * With the panel spanning the whole width the scrim has no uncovered
-   * pixels, so the close button is the only pointer route out of a
+   * With the panel spanning the whole width there is no scrim here at
+   * all (#171), so the close button is the only pointer route out of a
    * full-screen surface. Measured at 424×439 before #55: **25×21px**.
    */
   test('offers a way out a thumb can hit', async ({ app }) => {
@@ -194,6 +194,33 @@ test.describe('the queue is a screen where it covers the content', () => {
     expect(box!.width).toBeGreaterThanOrEqual(44);
     expect(box!.height).toBeGreaterThanOrEqual(44);
   });
+
+  /**
+   * #171 — and it draws no scrim, because there is nowhere to tap.
+   *
+   * `.panel-content` is `width: 100%` here, so the scrim sat entirely
+   * underneath it: measured at 424×439, host, panel and scrim all
+   * 424×318. #24's tap-outside-to-close cannot exist on a surface with
+   * no outside, and a `cursor: pointer` layer nobody can reach is a
+   * claim the component cannot keep.
+   *
+   * Asserted as absence rather than by clicking, for the reason the
+   * issue gives: a naive phone case clicks the scrim's centre and hits
+   * the panel, so it passes on the build this exists to fail. The scrim
+   * is still real between 600 and 899px, which `queue-overlay.spec.ts`
+   * asserts at 900×600 by clicking it.
+   */
+  test('draws no scrim, because a screen has no outside to tap', async ({
+    app,
+  }) => {
+    await openTheQueue(app);
+
+    const scrim = await queue(app).evaluate(
+      (el) => el.shadowRoot!.querySelector('.scrim') !== null,
+    );
+
+    expect(scrim).toBe(false);
+  });
 });
 
 /**

frontend/index.css

@@ -426,6 +426,7 @@ body div.sidebar {
             "jobs-band" auto
             "main-panel" 1fr
             "bottom-bar" auto
+            "progress-line" auto
             "bottom-nav" auto
             / 1fr;
         /* Nothing may scroll sideways here.  On a desktop the shell is
@@ -501,7 +502,8 @@ body div.sidebar {
        expression of the same fact is a second thing to keep in step.
        The view carries its own queue button, because this is where
        that one lived. */
-    body:has(#main-content[data-active-view="now-playing"]) .bottom-bar {
+    body:has(#main-content[data-active-view="now-playing"]) .bottom-bar,
+    body:has(#main-content[data-active-view="now-playing"]) player-progress-line {
         display: none;
     }
 }
@@ -568,8 +570,12 @@ body div.sidebar {
 /* Out of the desktop grid entirely.  `job-band` renders nothing above
    600px anyway, but an in-flow grid child with no named area is
    auto-placed into a row of the shell -- the same trap the skip link is
-   absolutely positioned to avoid. */
-body job-band {
+   absolutely positioned to avoid.  `player-progress-line` (#58) is the
+   same element in the same position for the same reason: below 600px it
+   has a named row, and above it there is no border for it to sit on --
+   the desktop bar carries a real, interactive seek bar. */
+body job-band,
+body player-progress-line {
     display: none;
 }
 
@@ -602,3 +608,21 @@ body job-band {
         background-color: var(--yj-bg-elevated, #343a40);
     }
 }
+
+/* #58.  How far through the song we are, in its own grid row between
+   the two bars -- so the line is *on* the border rather than inside
+   either of them, and in flow rather than over it.  The row is `auto`
+   and the element renders nothing while no track is loaded, so it costs
+   no height at all until there is something to say.
+
+   **This block is below the `display: none` above and has to be**, for
+   the reason the band's rule is: a media query adds no specificity, so
+   `body player-progress-line { display: block }` written before that
+   rule loses to it at equal specificity and the line never appears at
+   any width.  Nothing fails; it is simply not there. */
+@media (max-width: 599px) {
+    body player-progress-line {
+        display: block;
+        grid-area: progress-line;
+    }
+}

frontend/index.html

@@ -81,6 +81,16 @@
             </button>
         </div>
     </footer>
+    <!-- How far through the song we are, on the border between the two
+         bars (#58). The shell's element rather than either bar's:
+         they are separate components stacked in this grid, so a line
+         on the border between them is a row of it, and neither one has
+         to reach into the other's box for two pixels. It renders
+         nothing above 600px and nothing with no track, is `aria-hidden`
+         (Now Playing's seek bar is what announces the position) and
+         takes no pointer events at all -- a thin line that sometimes
+         seeks is worse than one that never does. -->
+    <player-progress-line></player-progress-line>
     <!-- The phone's primary navigation, hidden above 600px by
          index.css.  Eager rather than a chunk, for the reason
          notification-host is: it is the only way to move around the

frontend/index.ts

@@ -21,6 +21,10 @@ import '@components/audio-player/audio-player.ts';
 // In the bar rather than inside `audio-player` since #42, so the shell
 // is what has to register it.
 import '@components/audio-player/volume-control/volume-control.ts';
+// The phone's progress line (#58), on the border between the mini
+// player and the tab bar. In the shell for the same reason the volume
+// is, and eager because it is part of the bottom bar's first paint.
+import '@components/audio-player/progress-line/progress-line.ts';
 import '@components/track-list/track-list.ts';
 import '@components/now-playing/now-playing.ts';
 import '@components/sidebar/app-sidebar.ts';

frontend/scripts/check-css-literals.mjs

@@ -23,97 +23,23 @@
  * as the literal contains an unterminated `/*`. Nothing else produces
  * that, and a legitimate literal cannot contain one.
  */
-import { readFileSync } from 'node:fs';
-import { globSync } from 'node:fs';
+import { globSync, readFileSync } from 'node:fs';
+
+import { taggedLiterals } from './css-literals.mjs';
 
 const TAGS = ['css', 'html', 'svg'];
 
-/**
- * Find the end of a template literal that starts at `start` (the index
- * of its opening backtick), respecting escapes and `${}` substitutions.
- * Returns the index of the closing backtick, or -1.
- */
-function endOfTemplate(src, start) {
-  let depth = 0;
-
-  for (let i = start + 1; i < src.length; i++) {
-    const c = src[i];
-
-    if (c === '\\') {
-      i++;
-      continue;
-    }
-
-    if (c === '$' && src[i + 1] === '{') {
-      depth++;
-      i++;
-      continue;
-    }
-
-    if (c === '}' && depth > 0) {
-      depth--;
-      continue;
-    }
-
-    if (c === '`' && depth === 0) return i;
-  }
-
-  return -1;
-}
-
-/** Strip `${...}` substitutions, which may legitimately contain anything. */
-function stripSubstitutions(text) {
-  let out = '';
-  let depth = 0;
-
-  for (let i = 0; i < text.length; i++) {
-    if (text[i] === '$' && text[i + 1] === '{') {
-      depth++;
-      i++;
-      continue;
-    }
-
-    if (text[i] === '}' && depth > 0) {
-      depth--;
-      continue;
-    }
-
-    if (depth === 0) out += text[i];
-  }
-
-  return out;
-}
-
-function lineOf(src, index) {
-  return src.slice(0, index).split('\n').length;
-}
-
 const files = globSync('src/**/*.ts', { cwd: process.cwd() });
 const problems = [];
 
 for (const file of files) {
   const src = readFileSync(file, 'utf8');
-  const tagPattern = new RegExp(`(^|[^\\w$.])(${TAGS.join('|')})\``, 'g');
 
-  let match;
-
-  while ((match = tagPattern.exec(src)) !== null) {
-    const open = match.index + match[0].length - 1;
-    const close = endOfTemplate(src, open);
-
-    if (close === -1) continue;
-
-    const body = stripSubstitutions(src.slice(open + 1, close));
+  for (const { tag, body, line } of taggedLiterals(src, TAGS)) {
     const opens = (body.match(/\/\*/g) ?? []).length;
     const closes = (body.match(/\*\//g) ?? []).length;
 
-    if (opens > closes) {
-      problems.push({
-        file,
-        line: lineOf(src, open),
-        tag: match[2],
-      });
-    }
+    if (opens > closes) problems.push({ file, line, tag });
   }
 }
 

frontend/scripts/check-css-nesting.mjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/**
+ * Fail on a nested rule whose selector starts with an element name.
+ *
+ * See `css-nesting.mjs` for what the phone does with one. No tier here
+ * can see it: the component tier, the e2e tier and `make ui-visual` all
+ * run a current Chromium, where the rule applies normally, so the only
+ * report is a screenshot of the device — which is how the bottom bar's
+ * title came to have never truncated there.
+ *
+ * It covers `index.css` and the `css` literals in the components alike,
+ * because a shadow-root stylesheet is parsed by the same engine.
+ */
+import { globSync, readFileSync } from 'node:fs';
+
+import { taggedLiterals } from './css-literals.mjs';
+import { findBareNestedRules } from './css-nesting.mjs';
+
+const problems = [];
+
+// Every stylesheet, not `index.css` by name: the hook that runs this
+// fires on `frontend/**/*.{ts,css}`, so naming one file promises a
+// coverage the sweep does not deliver -- a second stylesheet would be
+// silently unswept while the hook still went green over it. There is
+// only `index.css` today, which is exactly when this is free to fix.
+const stylesheets = globSync('*.css', { cwd: process.cwd() });
+
+if (stylesheets.length === 0) {
+  console.error('css-nesting-check: no stylesheet matched *.css');
+  process.exit(1);
+}
+
+for (const file of stylesheets) {
+  for (const { line, selector } of findBareNestedRules(
+    readFileSync(file, 'utf8'),
+  )) {
+    problems.push({ file, line, selector });
+  }
+}
+
+const sources = globSync('src/**/*.ts', { cwd: process.cwd() });
+
+// A sweep over an empty glob passes, and this one is expected to find
+// nothing, so "it found nothing" has to mean it looked.
+if (sources.length === 0) {
+  console.error('css-nesting-check: no sources matched src/**/*.ts');
+  process.exit(1);
+}
+
+for (const file of sources) {
+  const src = readFileSync(file, 'utf8');
+
+  for (const literal of taggedLiterals(src, ['css'])) {
+    for (const { line, selector } of findBareNestedRules(literal.body)) {
+      problems.push({ file, line: literal.line + line - 1, selector });
+    }
+  }
+}
+
+if (problems.length > 0) {
+  for (const p of problems) {
+    console.error(
+      `${p.file}:${p.line}: nested rule "${p.selector.split('\n')[0]}" starts ` +
+        'with an element name — write it as "& ' +
+        `${p.selector.split('\n')[0]}"`,
+    );
+  }
+
+  console.error(
+    `\ncss-nesting-check: ${problems.length} problem(s). ` +
+      'Chrome 113 (the device) drops a nested rule that does not start ' +
+      'with a symbol; the leading & is valid in both syntaxes.',
+  );
+  process.exit(1);
+}
+
+console.log(
+  `css-nesting-check: ${stylesheets.length} stylesheet(s) + ${sources.length} files, no bare nested rules`,
+);

frontend/scripts/css-literals.mjs

@@ -0,0 +1,103 @@
+/**
+ * Finding the `css` tagged templates in a TypeScript source.
+ *
+ * Two checks read them — the unterminated-comment one and the nesting
+ * one — and a second scanner would be a second thing to keep in step
+ * with how a template literal actually ends.
+ */
+
+/**
+ * Find the end of a template literal that starts at `start` (the index
+ * of its opening backtick), respecting escapes and `${}` substitutions.
+ * Returns the index of the closing backtick, or -1.
+ */
+export function endOfTemplate(src, start) {
+  let depth = 0;
+
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+
+    if (c === '\\') {
+      i++;
+      continue;
+    }
+
+    if (c === '$' && src[i + 1] === '{') {
+      depth++;
+      i++;
+      continue;
+    }
+
+    if (c === '}' && depth > 0) {
+      depth--;
+      continue;
+    }
+
+    if (c === '`' && depth === 0) return i;
+  }
+
+  return -1;
+}
+
+/**
+ * Strip `${...}` substitutions, which may legitimately contain anything.
+ *
+ * Newlines inside them are kept, so a line number taken from the
+ * stripped text still names the right line of the file it came from.
+ */
+export function stripSubstitutions(text) {
+  let out = '';
+  let depth = 0;
+
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '$' && text[i + 1] === '{') {
+      depth++;
+      i++;
+      continue;
+    }
+
+    if (text[i] === '}' && depth > 0) {
+      depth--;
+      continue;
+    }
+
+    if (depth === 0) out += text[i];
+    else if (text[i] === '\n') out += '\n';
+  }
+
+  return out;
+}
+
+/** The 1-based line number of `index` in `src`. */
+export function lineOf(src, index) {
+  return src.slice(0, index).split('\n').length;
+}
+
+/**
+ * Every tagged template literal in `src` whose tag is in `tags`.
+ *
+ * `body` has its substitutions stripped and `line` is the line its
+ * opening backtick sits on, so `line + (n - 1)` is the file line of the
+ * body's own line `n`.
+ */
+export function taggedLiterals(src, tags) {
+  const pattern = new RegExp(`(^|[^\\w$.])(${tags.join('|')})\``, 'g');
+  const found = [];
+
+  let match;
+
+  while ((match = pattern.exec(src)) !== null) {
+    const open = match.index + match[0].length - 1;
+    const close = endOfTemplate(src, open);
+
+    if (close === -1) continue;
+
+    found.push({
+      tag: match[2],
+      body: stripSubstitutions(src.slice(open + 1, close)),
+      line: lineOf(src, open),
+    });
+  }
+
+  return found;
+}

frontend/scripts/css-nesting.mjs

@@ -0,0 +1,119 @@
+/**
+ * A nested rule whose selector starts with an element name is silently
+ * dropped on the phone.
+ *
+ * The device renders in Chrome 113, which predates relaxed CSS nesting
+ * (Chrome 120): before that a nested selector had to start with
+ * something that could not be read as the beginning of a declaration,
+ * so `.bottom-bar { audio-player { … } }` is not a parse error anyone
+ * would notice — the inner rule simply does not exist, on the phone and
+ * only on the phone. Three were live in `index.css`, one of them the
+ * `text-overflow: ellipsis` on the bottom bar's title, which had
+ * therefore never truncated on the device.
+ *
+ * `& audio-player` is valid in both syntaxes, so no nested rule here
+ * has any reason to omit it.
+ *
+ * Two things the detection has to get right:
+ *
+ * - **A rule directly inside an at-rule is not nested.**
+ *   `@media (…) { bottom-nav { … } }` at the top level is an ordinary
+ *   rule and is fine — and it is the majority of the matches a regex
+ *   over the file would produce. What decides it is whether a *style*
+ *   rule is somewhere above, not what the immediate parent is: inside
+ *   `.bar { @media (…) { audio-player { … } } }` the inner rule is
+ *   nested, at-rule in between or not.
+ * - **A declaration is not a rule.** `background: url(…)` and any
+ *   string or comment can hold a brace, so this tracks them rather than
+ *   matching lines.
+ */
+
+/** Does this selector start with an identifier, rather than a symbol? */
+function startsWithIdent(selector) {
+  return /^[A-Za-z_\u00A0-\uFFFF]/.test(selector);
+}
+
+/**
+ * Every nested style rule in `css` whose selector starts with an
+ * element name, as `{ line, selector }` with a 1-based line.
+ */
+export function findBareNestedRules(css) {
+  const found = [];
+  /** The blocks we are inside, innermost last: 'style' or 'at'. */
+  const stack = [];
+  /** The text since the last `{`, `}` or `;` — a prelude, if a `{` follows. */
+  let prelude = '';
+  let preludeLine = 1;
+  let line = 1;
+
+  const startPrelude = () => {
+    prelude = '';
+    preludeLine = line;
+  };
+
+  for (let i = 0; i < css.length; i++) {
+    const c = css[i];
+
+    if (c === '\n') {
+      line++;
+      if (prelude.trim() === '') preludeLine = line;
+      prelude += c;
+      continue;
+    }
+
+    if (c === '/' && css[i + 1] === '*') {
+      const end = css.indexOf('*/', i + 2);
+      const comment = css.slice(i, end === -1 ? css.length : end + 2);
+
+      line += (comment.match(/\n/g) ?? []).length;
+      i += comment.length - 1;
+      if (prelude.trim() === '') preludeLine = line;
+      continue;
+    }
+
+    if (c === '"' || c === "'") {
+      let j = i + 1;
+
+      while (j < css.length && css[j] !== c) {
+        if (css[j] === '\\') j++;
+        j++;
+      }
+
+      prelude += css.slice(i, j + 1);
+      i = j;
+      continue;
+    }
+
+    if (c === '{') {
+      const selector = prelude.trim();
+      const kind = selector.startsWith('@') ? 'at' : 'style';
+
+      if (
+        kind === 'style' &&
+        stack.includes('style') &&
+        startsWithIdent(selector)
+      ) {
+        found.push({ line: preludeLine, selector });
+      }
+
+      stack.push(kind);
+      startPrelude();
+      continue;
+    }
+
+    if (c === '}') {
+      stack.pop();
+      startPrelude();
+      continue;
+    }
+
+    if (c === ';') {
+      startPrelude();
+      continue;
+    }
+
+    prelude += c;
+  }
+
+  return found;
+}

frontend/src/components/artists-view/artists-view.ts

@@ -26,14 +26,15 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { RovingGridController } from '@utils/roving-grid';
 
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { dict, list } from '@utils/binding';
@@ -131,17 +132,17 @@ export class ArtistsView
     private contextMenuArtistId: number | null = null;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
     getPlaylistSubmenuPopup():
-        | WaPopup
+        | MenuTarget
         | undefined {
         return this.playlistSubmenuPopup;
     }
@@ -1336,11 +1337,8 @@ export class ArtistsView
 
     private renderContextMenu() {
         return html`
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .contextMenuOpen}
             >
@@ -1434,13 +1432,12 @@ export class ArtistsView
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .playlistSubmenuOpen}
             >
@@ -1468,7 +1465,7 @@ export class ArtistsView
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 

frontend/src/components/audio-player/progress-line/progress-line.ts

@@ -0,0 +1,204 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import { PlayerController } from '@store/controllers/player-controller';
+import { designTokens } from '../../../styles/tokens.css';
+import { PHONE_QUERY } from '../../../utils/breakpoints';
+
+/**
+ * How far through the song we are, on the border between the mini
+ * player and the tab bar (#58).
+ *
+ * The phone's bottom bar carries three controls and no seek bar — plan
+ * 016 B2 took it out, because 4px of height is not a thumb target and the
+ * full-screen `now-playing-view` is where seeking belongs. What went
+ * with it is the one thing a mini player is expected to say without
+ * being opened: how far through the song it is. This is that, and
+ * only that.
+ *
+ * Four things about it are load-bearing.
+ *
+ * **It is the shell's element, not either bar's.** The mini player and
+ * `<bottom-nav>` are separate components stacked in the shell's grid,
+ * so a line on the border between them is a row of the grid — either
+ * one drawing it means reaching into the other's box for two pixels.
+ *
+ * **It never counts.** The position is pushed at 1 Hz by the backend
+ * (`PlaybackPositionChanged`), and the interval here interpolates
+ * *between* those reports and is stopped and restarted by every one of
+ * them — the seek bar's rule, for the reason the seek bar has it: a
+ * local clock drifted 30 s away from the backend across four keyboard
+ * seeks. The `trackChangeId` and `seq` guards come along for the same
+ * reason: the store is a singleton, so a report about the previous
+ * track must not be adopted, and the same second reported twice still
+ * has to reset the interpolation.
+ *
+ * **It is not a control and cannot become one.** `aria-hidden` on the
+ * host and `pointer-events: none` throughout: the real progress is
+ * announced by the seek bar on Now Playing, and a 2px strip on the top
+ * edge of the tab bar that sometimes seeks is worse than one that
+ * never does. It is also where a thumb aiming at a tab lands.
+ *
+ * **It renders nothing above 600px**, from `matchMedia` rather than a
+ * media query, because that decides whether the element *exists* — and
+ * with it whether a 1 Hz interval runs for the life of every desktop
+ * session about a line nobody can see. `job-band`, `search-trigger`
+ * and `player-controls` are the same pattern for the same reason.
+ */
+
+/**
+ * The reporting cadence, matched. This is not the clock: it exists
+ * only so the line moves in the second between two reports, and its
+ * error is discarded by the next one rather than carried.
+ */
+const InterpolationIntervalMillis = 1000;
+
+@customElement('player-progress-line')
+export class PlayerProgressLine extends LitElement {
+    private player = new PlayerController(this);
+
+    /** Phone width. See the class comment: existence, not paint. */
+    @state() private phone = false;
+
+    /** Seconds into the track, from the last report plus interpolation. */
+    @state() private elapsed = 0;
+
+    private previousTrackChangeId = -1;
+
+    /** The sequence number of the last backend report applied. */
+    private previousPositionSeq = -1;
+
+    private timerID = -1;
+
+    private media?: MediaQueryList;
+
+    private onMedia = (e: MediaQueryListEvent) => {
+        this.phone = e.matches;
+    };
+
+    static override styles = [
+        designTokens,
+        css`
+            :host {
+                display: block;
+                /* Not a target, at any depth. */
+                pointer-events: none;
+            }
+
+            .track {
+                height: 2px;
+                background-color: var(--yj-bg-surface, #212529);
+            }
+
+            .fill {
+                height: 100%;
+                background-color: var(--yj-accent, #ffd43b);
+                /* scaleX off a full-width box rather than a width in
+                   percent, so the moving thing is a transform and the
+                   line costs no layout once a second. */
+                transform-origin: left center;
+            }
+        `,
+    ];
+
+    private get trackLength(): number {
+        return this.player.currentTrack?.trackLength ?? 0;
+    }
+
+    override connectedCallback(): void {
+        super.connectedCallback();
+
+        // Decorative in full: the seek bar on Now Playing is what
+        // announces the position, and this says the same thing without
+        // a name, a value or a way to act on it.
+        this.setAttribute('aria-hidden', 'true');
+
+        this.media = window.matchMedia(PHONE_QUERY);
+        this.phone = this.media.matches;
+        this.media.addEventListener('change', this.onMedia);
+    }
+
+    override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.stopInterpolating();
+        this.media?.removeEventListener('change', this.onMedia);
+    }
+
+    override updated(): void {
+        // A track change resets the line, and `trackChangeId` is what
+        // reveals one when the same file plays twice in a row.
+        const currentChangeId = this.player.currentTrack?.trackChangeId ?? -1;
+
+        if (currentChangeId !== this.previousTrackChangeId) {
+            this.previousTrackChangeId = currentChangeId;
+            this.elapsed = this.player.currentTrack?.seekPosition ?? 0;
+            this.stopInterpolating();
+        }
+
+        // The backend's own position wins over anything counted here,
+        // and a report for a track that is no longer loaded is stale by
+        // definition.
+        const position = this.player.position;
+
+        if (
+            position &&
+            position.trackChangeId === currentChangeId &&
+            position.seq !== this.previousPositionSeq
+        ) {
+            this.previousPositionSeq = position.seq;
+            this.elapsed = position.positionSeconds;
+            this.stopInterpolating();
+        }
+
+        // One owner for the interval, as in `seek-bar`: everything that
+        // wants it started or stopped says so by changing state that
+        // brings us back here.
+        if (this.phone && this.player.isPlaying && currentChangeId !== -1) {
+            this.startInterpolating();
+        } else {
+            this.stopInterpolating();
+        }
+    }
+
+    private stopInterpolating(): void {
+        if (this.timerID !== -1) {
+            clearInterval(this.timerID);
+            this.timerID = -1;
+        }
+    }
+
+    private startInterpolating(): void {
+        if (this.timerID !== -1) {
+            return;
+        }
+
+        this.timerID = window.setInterval(() => {
+            if (this.elapsed < this.trackLength) {
+                this.elapsed += 1;
+            }
+        }, InterpolationIntervalMillis);
+    }
+
+    override render() {
+        // Nothing playing is nothing to say, and the grid row is `auto`
+        // so an empty render costs no height at all -- `job-band`'s
+        // rule one row down.
+        if (!this.phone || this.player.currentTrack === null) return nothing;
+
+        const length = this.trackLength;
+        const fraction =
+            length > 0 ? Math.min(1, Math.max(0, this.elapsed / length)) : 0;
+
+        return html`
+            <div class="track" data-testid="progress-line">
+                <div class="fill" style="transform: scaleX(${fraction})"></div>
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'player-progress-line': PlayerProgressLine;
+    }
+}

frontend/src/components/config-page/shortcut-capture.ts

@@ -79,6 +79,17 @@ export class ShortcutCapture extends LitElement {
         .reset-btn:hover {
             color: var(--yj-accent-text, #ffd43b);
         }
+        /*
+         * Reset is the only way to put a rebound shortcut back, so where
+         * the device has no hover it is always visible rather than an
+         * invisible button holding its hit area. The inverse of #68's
+         * rule, which applies where the hover control is redundant.
+         */
+        @media not all and (hover: hover) {
+            .reset-btn {
+                opacity: 1;
+            }
+        }
     `;
 
     private handleClick = () => {

frontend/src/components/cover-grid/cover-grid.ts

@@ -23,7 +23,8 @@ import { gridColumnsFor, gridSpacingFor } from '@utils/grid-spacing';
 import { queueStore } from '@store/queue-store';
 import type { QueueSource } from '@store/queue-store';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/playlist-picker/playlist-picker.js';
@@ -51,7 +52,7 @@ import {
     ContextMenuController,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { creditLink, exploreLinkStyles } from '../../utils/explore-link';
 import { creditStore } from '@store/credit-store';
@@ -415,17 +416,17 @@ export class CoverGrid
     splitIndex = 0;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
     // ContextMenuHost interface.
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -2087,11 +2088,8 @@ export class CoverGrid
         const { ctxMenu } = this;
 
         return html`
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${ctxMenu.contextMenuOpen}
             >
                 ${ctxMenu.contextMenuOpen
@@ -2204,13 +2202,12 @@ export class CoverGrid
                           </div>
                       `
                 : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${ctxMenu.playlistSubmenuOpen}
             >
                 ${ctxMenu.playlistSubmenuOpen
@@ -2232,7 +2229,7 @@ export class CoverGrid
                           </div>
                       `
                 : nothing}
-            </wa-popup>
+            </menu-surface>
 
             <track-details></track-details>
         `;

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -49,9 +49,11 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { dictByName } from '@utils/binding';
 import type { TrackDetails } from '@components/track-details/track-details.js';
@@ -327,7 +329,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
     @state() private ctxMenuTrack: MBTrack | null = null;
 
     @query('#track-context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
     private playlistSubmenuPopup?: WaPopup;
@@ -337,11 +339,11 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
 
     // -- ContextMenuHost interface --
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -890,6 +892,67 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
             .track-row .track-request {
                 flex-shrink: 0;
             }
+
+            /* ── The phone (#66) ──
+             *
+             * **This block is last on purpose**, for index.css's
+             * reason: a media query adds no specificity, so a rule
+             * written above the plain one it overrides loses to it and
+             * every declaration here is silently dead.
+             *
+             * Two faults, one shape. The page is a fixed header over a
+             * scrolling tracklist — the desktop arrangement — so at the
+             * reference device's 424x439 the header owned 253 of the
+             * panel's 318px and the tracklist scrolled inside the 64px
+             * that were left. And the header's flex row squeezed
+             * .album-info to 112px, so the title drew as one ellipsised
+             * glyph and two of the album's three primary actions were
+             * clipped by the host's own overflow: Shuffle album ended
+             * at x=443 in a 424px box, unreachable by any gesture.
+             *
+             * .album-info carries min-width: 0 and was shrinking as
+             * asked, so another one is not the fix — the row has to
+             * stack, or the info column has nothing to be wide with.
+             *
+             * The scroller moves to the host and .content stops being
+             * one, which is what makes the header scroll away; the
+             * tracklist is plain DOM rather than a virtualizer, so
+             * nothing inside wants a scroll window of its own. */
+            @media (max-width: 599px) {
+                :host {
+                    overflow-y: auto;
+                }
+
+                .album-header {
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 12px;
+                    padding: 12px 16px;
+                }
+
+                /* Stacked, the art is the whole of the header's width
+                 * budget and its 200px square is 45% of the reference
+                 * device's height. It is still what identifies the
+                 * album, so it shrinks rather than going. */
+                .cover-art-container {
+                    width: 140px;
+                    height: 140px;
+                }
+
+                /* A column flex item takes its content's width from
+                 * align-items: flex-start above, which would leave the
+                 * actions wrapping inside a box narrower than the row
+                 * they now have to themselves. */
+                .album-info {
+                    align-self: stretch;
+                }
+
+                .content {
+                    flex: 0 0 auto;
+                    overflow-y: visible;
+                    padding: 16px 16px 24px;
+                }
+            }
         `,
     ];
 
@@ -3781,11 +3844,8 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         const track = this.ctxMenuTrack;
 
         return html`
-            <wa-popup
+            <menu-surface
                 id="track-context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu.contextMenuOpen}
             >
                 ${this.ctxMenu.contextMenuOpen && track
@@ -3846,13 +3906,12 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu.playlistSubmenuOpen}
             >
                 ${this.ctxMenu.playlistSubmenuOpen
@@ -3869,7 +3928,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 }

frontend/src/components/explore-artist-details/explore-artist-details.ts

@@ -61,9 +61,11 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { dict, dictByName } from '@utils/binding';
 import type { TrackDetails } from '@components/track-details/track-details.js';
@@ -215,7 +217,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
     @state() private ctxMenuTarget: ContextMenuTarget | null = null;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
     private playlistSubmenuPopup?: WaPopup;
@@ -233,11 +235,11 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
 
     // -- ContextMenuHost interface --
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -2621,11 +2623,8 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
         const target = this.ctxMenuTarget;
 
         return html`
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu.contextMenuOpen}
             >
                 ${this.ctxMenu.contextMenuOpen && target
@@ -2643,13 +2642,12 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu.playlistSubmenuOpen}
             >
                 ${this.ctxMenu.playlistSubmenuOpen
@@ -2666,7 +2664,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 

frontend/src/components/explore-view/explore-view.ts

@@ -37,9 +37,11 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { dict, dictByName } from '@utils/binding';
 import { ICON_QUEUE } from '@utils/icon-language';
@@ -206,13 +208,13 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
     @state() private ctxMenuTarget: ExploreMenuTarget | null = null;
 
     @litQuery('#explore-context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     // -- ContextMenuHost interface --
     // No playlist submenu — same reason as the album/artist detail
     // pages: every action here resolves its one file lazily.
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
@@ -1341,11 +1343,8 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
         const owned = Boolean(target?.localId);
 
         return html`
-            <wa-popup
+            <menu-surface
                 id="explore-context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu.contextMenuOpen}
             >
                 ${this.ctxMenu.contextMenuOpen && target
@@ -1374,7 +1373,7 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 

frontend/src/components/genres-view/genres-view.ts

@@ -24,14 +24,15 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { RovingGridController } from '@utils/roving-grid';
 
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { dictByName } from '@utils/binding';
@@ -137,19 +138,19 @@ export class GenresView
     private contextMenuGenreName: string | null = null;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
     // ----- ContextMenuHost interface -----
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
     getPlaylistSubmenuPopup():
-        | WaPopup
+        | MenuTarget
         | undefined {
         return this.playlistSubmenuPopup;
     }
@@ -1176,11 +1177,8 @@ export class GenresView
 
     private renderContextMenu() {
         return html`
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .contextMenuOpen}
             >
@@ -1284,13 +1282,12 @@ export class GenresView
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .playlistSubmenuOpen}
             >
@@ -1318,7 +1315,7 @@ export class GenresView
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 

frontend/src/components/menu-surface/menu-surface.ts

@@ -0,0 +1,318 @@
+/**
+ * Where a context menu is drawn: a popup on a desktop, a bottom sheet
+ * on a phone (#60).
+ *
+ * Every context menu in this app is a `.context-menu-panel` inside a
+ * `<wa-popup>` anchored to the touch point, driven by
+ * `ContextMenuController`. On the reference device that is structurally
+ * broken, and the failure was measured on the hardware rather than
+ * inferred:
+ *
+ * - Chrome 113 has **no Popover API** (`popover` is Chrome 114), so
+ *   `wa-popup` takes its own documented fallback and positions with
+ *   `strategy: "fixed"` instead of the top layer. Measured on the
+ *   device: `HTMLElement.prototype.hasOwnProperty('popover')` is false
+ *   and the popup's computed `position` is `fixed`.
+ * - `index.css` puts `contain: layout style paint` on `.main-panel`,
+ *   the ancestor of every view. Paint containment **clips** fixed
+ *   descendants. Measured: `.main-panel` computes `contain: content`
+ *   and spans 0-318 of a 439px viewport, while the open menu spans
+ *   191-401 — so 83px of it, three of its seven items, is cut off.
+ *
+ * A `<dialog>` fixes it by construction rather than by styling, because
+ * `showModal()` is Chrome 37 and uses the real top layer. **That was
+ * measured too, and it needed to be**: every other dialog in this app
+ * is mounted in `index.html`, *outside* `.main-panel`, so "dialogs are
+ * fine" was not evidence about a dialog opened from inside a view. A
+ * probe dialog appended to `track-list`'s shadow root paints to y=439,
+ * over the mini player and the tab bar, with the contained ancestor
+ * still there.
+ *
+ * Four things about this component are load-bearing.
+ *
+ * **It is one element with two presentations, not two components.**
+ * The host keeps rendering exactly the panel it rendered before and
+ * slots it into whichever surface is up, so the twelve call sites
+ * changed one tag name each and nothing else — no second item model, no
+ * second keyboard model, and `ContextMenuController` still drives
+ * `.active` and `.anchor` as if it were talking to a `wa-popup`.
+ *
+ * **Which surface exists is `matchMedia`, not a media query.** The
+ * decision is whether a `<dialog>` is in the tree at all, which is
+ * `job-band` and `player-controls`' rule: a `display: none` surface is
+ * still in the shadow root and still something a positional or by-role
+ * query finds.
+ *
+ * **The sheet has to un-do the UA stylesheet to be full-bleed.**
+ * A native `<dialog>` carries `max-width: calc(100% - 6px - 2em)` and
+ * `margin: auto`, which on the device produced a 354px panel floating
+ * in the middle of a 424px screen. `max-width: none` and explicit
+ * margins are what make it a sheet rather than a small centred box.
+ * The *positioning* needs no such care: a top-layer dialog's containing
+ * block is the viewport even with a paint-contained ancestor, which is
+ * why `bottom: 0` reaches y=439 and not the main panel's 318.
+ *
+ * **Dismissal has to travel back.** `wa-dialog` closes itself on
+ * Escape, which would otherwise leave the controller's
+ * `contextMenuOpen` true and the menu unopenable until something else
+ * cleared it. `menu-dismiss` is that signal, and the controller listens
+ * for it on the document beside the click and contextmenu listeners it
+ * already has.
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import '@awesome.me/webawesome/dist/components/popup/popup.js';
+import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
+import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+
+import { PHONE_QUERY } from '@utils/breakpoints';
+import { nameDialogsIn } from '@utils/name-dialog';
+
+/** The event a surface dispatches when it closed itself. */
+export const MENU_DISMISS_EVENT = 'menu-dismiss';
+
+/**
+ * The event a surface dispatches once it has finished showing.
+ *
+ * Only the sheet sends it, and only because `wa-dialog` moves focus to
+ * itself on the frame after `showModal()` -- see `MenuKeyboard.refocus`
+ * for why waiting longer is not the fix.
+ */
+export const MENU_SHOWN_EVENT = 'menu-shown';
+
+/**
+ * A `wa-popup` anchor: a real element or a virtual one.
+ *
+ * `undefined` rather than `null` for "not set yet", because that is
+ * what `wa-popup`'s own property accepts — this surface hands the value
+ * straight through and must not widen it.
+ */
+type MenuAnchor = WaPopup['anchor'] | undefined;
+
+/** A `wa-dialog`, as much of it as this file needs. */
+type DialogEl = HTMLElement & { open: boolean };
+
+@customElement('menu-surface')
+export class MenuSurface extends LitElement {
+    /** Whether the menu is showing. Set by `ContextMenuController`. */
+    @property({ type: Boolean }) active = false;
+
+    /**
+     * Where the popup hangs from. Ignored in sheet mode, which is
+     * anchored to the bottom of the screen rather than to the touch
+     * point — that is the whole point of a sheet.
+     */
+    @property({ attribute: false }) anchor: MenuAnchor = undefined;
+
+    /**
+     * `wa-popup`'s placement, defaulted because all twelve call sites
+     * passed the same one. Kept as a property so a future menu that
+     * wants another does not have to reach past this component.
+     */
+    @property() placement = 'bottom-start';
+
+    /**
+     * What to call the sheet, for a surface whose content is not a
+     * `.context-menu-panel` with an `aria-label` of its own -- the
+     * playlist submenu, whose content is a `playlist-picker`.
+     */
+    @property() label = '';
+
+    @state() private sheet = false;
+
+    @query('wa-popup') private popup?: WaPopup;
+
+    @query('wa-dialog') private dialog?: DialogEl;
+
+    private phoneQuery?: MediaQueryList;
+
+    static override styles = css`
+        :host {
+            display: contents;
+        }
+
+        wa-popup {
+            z-index: 200;
+        }
+
+        /* The sheet. A native dialog's UA stylesheet centres it and
+           caps its width, which on the device drew a 354px box in the
+           middle of a 424px screen — so all four of these are undoing
+           that rather than decorating. */
+        wa-dialog::part(dialog) {
+            margin: auto auto 0 auto;
+            max-width: none;
+            max-height: 85vh;
+            width: 100%;
+            border-radius: 12px 12px 0 0;
+            background: var(--yj-bg-elevated, #343a40);
+            padding: 0;
+        }
+
+        /* **A long menu scrolls; it does not hang off the bottom.**
+           Measured on the device at 80vh: seven 48px rows plus the grip
+           came to 364px against a 351px dialog, so the last row's
+           bottom was at y=452 on a 439px screen -- the one row a
+           destructive action is most likely to be. The cap has to stay
+           (a sheet covering the whole screen is a page, not a sheet),
+           so the body is what gives. */
+        wa-dialog::part(body) {
+            padding: 0;
+            overflow-y: auto;
+        }
+
+        /* A sheet is dragged at with a thumb, so it says where its top
+           edge is. Decorative: the panel below it carries the actions. */
+        .grip {
+            width: 36px;
+            height: 4px;
+            margin: 8px auto 4px;
+            border-radius: 2px;
+            background: var(--yj-text-tertiary, #888);
+        }
+    `;
+
+    override connectedCallback(): void {
+        super.connectedCallback();
+
+        // Looked up here rather than at module load, so a test can
+        // install its own matchMedia before the element is created.
+        this.phoneQuery = window.matchMedia?.(PHONE_QUERY);
+        this.sheet = this.phoneQuery?.matches ?? false;
+        this.phoneQuery?.addEventListener('change', this.onPhoneChange);
+    }
+
+    override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.phoneQuery?.removeEventListener('change', this.onPhoneChange);
+    }
+
+    private onPhoneChange = (e: MediaQueryListEvent): void => {
+        this.sheet = e.matches;
+    };
+
+    /**
+     * Re-run the popup's positioning.
+     *
+     * Forwarded rather than dropped because `page-header` calls it when
+     * it opens the overflow menu: the popup is rendered before the
+     * button it anchors to has settled. A sheet has nothing to
+     * reposition -- it is anchored to the bottom of the screen -- so
+     * there it is deliberately a no-op rather than an error.
+     */
+    reposition(): void {
+        this.popup?.reposition();
+    }
+
+    /**
+     * The panel the host slotted in. It is light DOM here and stays in
+     * the host's shadow root, which is what keeps the host's own
+     * `contextMenuStyles` applying to it in both presentations.
+     */
+    private get panel(): HTMLElement | null {
+        return this.querySelector('.context-menu-panel');
+    }
+
+    override updated(): void {
+        const panel = this.panel;
+
+        // The sheet's rows are bigger, and that rule lives in the one
+        // stylesheet every call site already includes rather than in
+        // twelve places. The attribute is how it knows.
+        if (panel) panel.toggleAttribute('data-sheet', this.sheet);
+
+        if (this.sheet) {
+            this.syncSheet(panel);
+
+            return;
+        }
+
+        if (this.popup) {
+            if (this.anchor) this.popup.anchor = this.anchor;
+
+            this.popup.active = this.active;
+        }
+    }
+
+    private syncSheet(panel: HTMLElement | null): void {
+        const dialog = this.dialog;
+
+        if (!dialog) return;
+
+        // The dialog is named after the menu it contains, so no call
+        // site has to say the same thing twice: the panel already
+        // carries `role="menu"` and an `aria-label` naming what it acts
+        // on. `without-header` renders no heading, which is
+        // `name-dialog`'s documented `aria-label` path.
+        const label = panel?.getAttribute('aria-label') || this.label;
+
+        if (label) dialog.setAttribute('label', label);
+
+        nameDialogsIn(this.shadowRoot);
+
+        if (dialog.open !== this.active) dialog.open = this.active;
+    }
+
+    /**
+     * `wa-dialog` closed itself — Escape, or its own close button.
+     * The controller owns `contextMenuOpen`, so it has to hear about
+     * it or the menu is left open in state and shut on screen.
+     */
+    private onDialogShown = (): void => {
+        if (!this.active) return;
+
+        this.dispatchEvent(
+            new CustomEvent(MENU_SHOWN_EVENT, {
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    };
+
+    private onDialogHide = (): void => {
+        if (!this.active) return;
+
+        this.dispatchEvent(
+            new CustomEvent(MENU_DISMISS_EVENT, {
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    };
+
+    override render() {
+        if (this.sheet) {
+            // **The anchor stays out of the sheet.** One call site --
+            // `page-header`'s overflow menu -- slots its own trigger
+            // button as the thing the popup hangs from, and a sheet
+            // hangs from the bottom of the screen instead. Rendering
+            // that slot outside the dialog is what keeps the button on
+            // the page rather than inside the surface it opens.
+            return html`
+                <slot name="anchor"></slot>
+                <wa-dialog
+                    without-header
+                    data-testid="menu-sheet"
+                    @wa-after-show=${this.onDialogShown}
+                    @wa-hide=${this.onDialogHide}
+                >
+                    <div class="grip"></div>
+                    <slot></slot>
+                </wa-dialog>
+            `;
+        }
+
+        return html`
+            <wa-popup placement=${this.placement} flip shift>
+                <slot name="anchor" slot="anchor"></slot>
+                <slot></slot>
+            </wa-popup>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'menu-surface': MenuSurface;
+    }
+}

frontend/src/components/now-playing-view/now-playing-view.ts

@@ -105,6 +105,19 @@ export class NowPlayingView extends LitElement {
             color: var(--yj-text-secondary, #adb5bd);
         }
 
+        /* The art and the names are one block, so that a short
+           screen can lay them out side by side without either of them
+           knowing about the other's box. Vertically it is exactly what
+           the host used to do -- same gap, art flexible, names fixed --
+           so the tall layout is unchanged. */
+        .stack {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75em;
+            flex: 1 1 auto;
+            min-height: 0;
+        }
+
         .art {
             flex: 1 1 auto;
             display: flex;
@@ -113,38 +126,89 @@ export class NowPlayingView extends LitElement {
             min-height: 0;
         }
 
-        .art img,
-        .art .placeholder {
-            /* Square, and never taller than the room left over: the
-               art is the one thing here that would happily push the
-               transport off the bottom of a short phone.
+        .art img {
+            /* Square, and never larger than the room left over --
+               where "square" is a property of what is painted and not
+               just of what was asked for.
 
-               **max-height is what actually keeps that promise**, and
-               it was missing. With a definite width and
-               a 1:1 aspect-ratio the height is *derived from the width*
-               and is bounded by nothing: at the reference device's
-               424x439 that is a 263px square (60vh) in a box with far
-               less than 263px left, so the art overflowed its own
-               centred flex item and drew over the header above and the
-               title below it. The comment claimed this was handled;
-               60vh is a bound on the *viewport*, not on the room left
-               over, and those differ by however much chrome is above
-               and below.
+               The previous rule asked for a square and did not get
+               one. width: min(100%, 60vh) makes the width definite,
+               aspect-ratio: 1 derives the height from it, and
+               max-height: 100% then clamps that height **without
+               re-deriving the width** -- which is how the
+               aspect-ratio property is specified to behave, unlike
+               an intrinsic ratio. So whenever the room left over was
+               shorter than the box was wide, the art was drawn as a
+               letterbox strip and object-fit: cover cropped the
+               cover to it. Measured on the reference device at
+               424x439: **264x53**, a 5:1 band of a square image.
 
-               Pre-existing -- screenshotted on main -- and made acute
-               by #56, which gives the transport 95px more than it had.
-               Found by reading a screenshot, which is the only tier
-               that can see it: nothing fails, nothing overflows the
-               *shell*, and every control is still hittable. */
-            width: min(100%, 60vh);
+               That is not only the phone. The leftover exceeds the
+               width only above ~843px of viewport, so every height
+               from ~500 to ~843 -- most phones, and any small window
+               -- drew a cropped strip too.
+
+               Both maxes with auto sizes is the fix, and it is the
+               replaced-element path rather than the aspect-ratio
+               one: the used size preserves the ratio under *both*
+               bounds (CSS2.1 10.4), so the art is square at every
+               height. Checked against Chrome 113 itself -- the
+               device's engine -- at column heights of 288, 300, 451,
+               600 and 800: square at all five, where the old rule
+               cropped at four.
+
+               A corollary worth knowing: auto will not upscale past
+               the image's natural size, and the largest tier
+               saveCoverArt keeps is 400px. Drawing it larger was
+               upscaling, so nothing is lost. */
+            max-width: 100%;
             max-height: 100%;
+            width: auto;
+            height: auto;
             aspect-ratio: 1;
             object-fit: cover;
             border-radius: 12px;
             background-color: var(--yj-bg-elevated, #343a40);
         }
 
+        /* The placeholder is not a replaced element, so it cannot use
+           the rule above: with no intrinsic size, auto/auto collapses
+           it to its icon -- measured at 13x58 in Chrome 113, which is
+           neither square nor the art's size.
+
+           So it is sized from the height, and then bounded by the
+           width in the one way a box like this can be. A non-replaced
+           element cannot express "the largest square that fits" in a
+           single rule: aspect-ratio derives the second axis from the
+           first, and whichever max clamps it does not re-derive the
+           other, which is the same trap the image rule above is about.
+           Driving it from the height alone is right until the column
+           is taller than it is wide -- ~843px of viewport, which is a
+           tall phone and #51's other named device -- and there it went
+           380x484.
+
+           max-height in viewport units is what closes it, and it is
+           sound here for the reason 60vh was not: this view is a
+           phone-width detail view, so its content box really is the
+           viewport less the host's own 1rem gutters. It is a *max*, so
+           the failure mode if that ever stopped being true is a square
+           bounded slightly early rather than a crop. rem and not em --
+           this box sets font-size: 3rem for the icon, so 2em here
+           would be 96px. */
         .art .placeholder {
+            height: 100%;
+            width: auto;
+            max-width: 100%;
+            max-height: calc(100vw - 2rem);
+            /* A flex item's automatic minimum is its content, so
+               without this the icon's own width becomes a floor and
+               the box goes wider than it is tall the moment the row is
+               shorter than the icon -- which is exactly the state a
+               job band puts this screen in. */
+            min-width: 0;
+            aspect-ratio: 1;
+            border-radius: 12px;
+            background-color: var(--yj-bg-elevated, #343a40);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -232,6 +296,60 @@ export class NowPlayingView extends LitElement {
             color: var(--yj-text-secondary, #adb5bd);
             text-align: center;
         }
+
+        /* Below 500px of viewport the art and the names sit side by
+           side, and that is the whole of this screen's answer to a
+           short phone (#51).
+
+           The stacked layout cannot be rescued by sizing alone. Its
+           budget is fixed -- 48px of header, 143px of transport since
+           #64, 78px of names, 68px of padding and gaps -- so the art
+           gets height - 386, which on the reference device's 424x439
+           is **53px**. #172 measured 39px before #64 and named the
+           two options: give the art a floor and let the block scroll,
+           or reflow. A floor scrolls the transport off the bottom,
+           and "controls never scroll off" is #51's own Direction and
+           plan 018's promise -- so it is the reflow.
+
+           Sideways the art is bounded by the row's height rather than
+           by the column's leftover, which is the whole gain: the same
+           439px screen goes from a 53px sliver to **143px**, measured
+           on the device, with nothing scrolling and the transport
+           untouched.
+
+           500 is where the two layouts cross rather than a round
+           number. In a row the art is height - 296 and the names get
+           what is left of 392px, so the names hold 176px at exactly
+           500 and less above it; stacked, the art is height - 386,
+           which passes 176px at 562. Below 500 the row is the bigger
+           art *and* the readable one -- above it the column is, which
+           is why a tall phone (a Pixel 7's ~869) keeps the layout it
+           has. Unverified on that device: none was attached.
+
+           It is keyed on height alone, not on the phone's width,
+           because it is an answer to vertical room -- a 900x450 window
+           has the same problem and the same fix. */
+        @media (max-height: 500px) {
+            .stack {
+                flex-direction: row;
+                align-items: center;
+            }
+
+            /* A square of the row's height. The box has to carry the
+               ratio here rather than the image, because in a row the
+               art's width is what the ratio has to produce -- and the
+               image's own rule then fits it to a box that is already
+               square. */
+            .art {
+                flex: 0 1 auto;
+                height: 100%;
+                aspect-ratio: 1;
+            }
+
+            .meta {
+                flex: 1 1 auto;
+            }
+        }
     `];
 
     private back() {
@@ -283,55 +401,57 @@ export class NowPlayingView extends LitElement {
         return html`
             ${this.renderHeader()}
 
-            <div class="art">
-                ${art
-                    ? html`<img
-                          src=${art}
-                          alt=""
-                          decoding="async"
-                          data-testid="npv-art"
-                      />`
-                    : html`<div class="placeholder" aria-hidden="true">
-                          <wa-icon name="compact-disc"></wa-icon>
-                      </div>`}
-            </div>
-
-            <div class="meta">
-                <div class="names">
-                    <h2 class="title" data-testid="npv-title">
-                        ${track.title || track.fileName}
-                    </h2>
-                    <p class="artist">
-                        ${creditLink(
-                            creditStore.credits(track.recordingMbid),
-                            track.artist,
-                            track.artistMbid,
-                        )}
-                    </p>
-                    ${track.album
-                        ? html`<p class="album">
-                              ${albumLink(
-                                  track.album,
-                                  track.releaseGroupMbid,
-                                  undefined,
-                                  track.artist,
-                              )}
-                          </p>`
-                        : nothing}
+            <div class="stack">
+                <div class="art">
+                    ${art
+                        ? html`<img
+                              src=${art}
+                              alt=""
+                              decoding="async"
+                              data-testid="npv-art"
+                          />`
+                        : html`<div class="placeholder" aria-hidden="true">
+                              <wa-icon name="compact-disc"></wa-icon>
+                          </div>`}
                 </div>
 
-                <button
-                    type="button"
-                    class="favorite ${favorited ? 'on' : ''}"
-                    data-testid="npv-favorite"
-                    aria-pressed=${favorited ? 'true' : 'false'}
-                    aria-label=${favorited
-                        ? `Remove ${track.title} from ${this.favCtrl.playlistName}`
-                        : `Add ${track.title} to ${this.favCtrl.playlistName}`}
-                    @click=${this.toggleFavorite}
-                >
-                    <wa-icon name=${this.favCtrl.iconFor(favorited)}></wa-icon>
-                </button>
+                <div class="meta">
+                    <div class="names">
+                        <h2 class="title" data-testid="npv-title">
+                            ${track.title || track.fileName}
+                        </h2>
+                        <p class="artist">
+                            ${creditLink(
+                                creditStore.credits(track.recordingMbid),
+                                track.artist,
+                                track.artistMbid,
+                            )}
+                        </p>
+                        ${track.album
+                            ? html`<p class="album">
+                                  ${albumLink(
+                                      track.album,
+                                      track.releaseGroupMbid,
+                                      undefined,
+                                      track.artist,
+                                  )}
+                              </p>`
+                            : nothing}
+                    </div>
+
+                    <button
+                        type="button"
+                        class="favorite ${favorited ? 'on' : ''}"
+                        data-testid="npv-favorite"
+                        aria-pressed=${favorited ? 'true' : 'false'}
+                        aria-label=${favorited
+                            ? `Remove ${track.title} from ${this.favCtrl.playlistName}`
+                            : `Add ${track.title} to ${this.favCtrl.playlistName}`}
+                        @click=${this.toggleFavorite}
+                    >
+                        <wa-icon name=${this.favCtrl.iconFor(favorited)}></wa-icon>
+                    </button>
+                </div>
             </div>
 
             <div class="transport">

frontend/src/components/page-header/page-header.ts

@@ -1,9 +1,9 @@
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
-import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 
 import { designTokens } from '../../styles/tokens.css';
 import {
@@ -183,8 +183,8 @@ export class PageHeader extends LitElement {
     @query('#page-header-overflow')
     private menuPanel?: HTMLElement;
 
-    @query('wa-popup')
-    private popup?: WaPopup;
+    @query('menu-surface')
+    private popup?: MenuSurface;
 
     private menuKeyboard = new MenuKeyboard(() => this.closeMenu());
 
@@ -418,7 +418,7 @@ export class PageHeader extends LitElement {
                 outline-offset: -1px;
             }
 
-            wa-popup {
+            menu-surface {
                 z-index: 200;
             }
 
@@ -670,10 +670,17 @@ export class PageHeader extends LitElement {
         return html`
             <div class="actions">
                 ${this.actions.map((a) => this.renderActionButton(a))}
-                <wa-popup
+                <!-- A sheet below 600px, like every other menu in the
+                     app (#60). The clipping that issue is about does
+                     not bite here — this one opens downward from the
+                     top of a full-height view, so it has somewhere to
+                     go even without top-layer promotion — but the touch
+                     targets do: on a phone *every* action of a page
+                     that overflows lives in here, at wa-dropdown-item
+                     defaults. One surface, so there is no second
+                     answer to what a menu looks like. -->
+                <menu-surface
                     placement="bottom-end"
-                    flip
-                    shift
                     .active=${this.menuOpen}
                 >
                     <button
@@ -711,7 +718,7 @@ export class PageHeader extends LitElement {
                             `,
                         )}
                     </div>
-                </wa-popup>
+                </menu-surface>
             </div>
         `;
     }

frontend/src/components/playlist-details/playlist-details.ts

@@ -7,7 +7,8 @@ import {
 } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@lit-labs/virtualizer';
 import type { LitVirtualizer } from '@lit-labs/virtualizer';
@@ -35,7 +36,7 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { focusRovingRow, nextRovingIndex } from '@utils/roving-rows';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { notificationStore } from '@store/notification-store';
@@ -145,10 +146,10 @@ export class PlaylistDetails
     private dragImageEl: HTMLElement | null = null;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
     @query('track-details')
     private trackDetailsDialog!: TrackDetails;
@@ -163,11 +164,11 @@ export class PlaylistDetails
     // ContextMenuHost interface
     // =================================================================
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -1617,11 +1618,8 @@ export class PlaylistDetails
 
     private renderContextMenu() {
         return html`
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .contextMenuOpen}
             >
@@ -1783,13 +1781,12 @@ export class PlaylistDetails
                               </div>
                           `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .playlistSubmenuOpen}
             >
@@ -1816,7 +1813,7 @@ export class PlaylistDetails
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 }

frontend/src/components/playlist-view/playlist-view.ts

@@ -2,7 +2,9 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, state, query } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 
 import {
@@ -140,7 +142,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
     private pendingDropPaths: string[] = [];
 
     @query('#playlist-context-menu')
-    private playlistContextMenuPopup!: WaPopup;
+    private playlistContextMenuPopup!: MenuSurface;
 
     @query('duplicate-tracks-dialog')
     private duplicateDialog!: DuplicateTracksDialog;
@@ -1059,7 +1061,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
         );
     }
 
-    private closePlaylistContextMenu() {
+    private closePlaylistContextMenu = () => {
         if (!this.playlistContextMenuOpen) return;
 
         this.menuKeyboard.close();
@@ -1072,7 +1074,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
         if (popup) {
             popup.active = false;
         }
-    }
+    };
 
     private async onPlaylistContextAction(
         action: string,
@@ -1500,13 +1502,11 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                   </div>`
                 : this.renderPlaylistList()}
 
-            <wa-popup
+            <menu-surface
                 id="playlist-context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this
                     .playlistContextMenuOpen}
+                @menu-dismiss=${this.closePlaylistContextMenu}
             >
                 ${this.playlistContextMenuOpen
                     ? html`
@@ -1564,7 +1564,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
             <duplicate-tracks-dialog
                 @playlist-action-complete=${() =>

frontend/src/components/queue-panel/queue-panel.ts

@@ -9,9 +9,11 @@ import {
 } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { QueueController } from '@store/controllers/queue-controller';
+import { PHONE_QUERY } from '@utils/breakpoints';
 import { creditStore } from '@store/credit-store';
 import {
     describeQueueSource,
@@ -34,7 +36,7 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { focusRovingRow, nextRovingIndex } from '@utils/roving-rows';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import {
@@ -119,6 +121,25 @@ export class QueuePanel
     @property({ type: Boolean, reflect: true })
     overlay = false;
 
+    /**
+     * Phone width, from `matchMedia` rather than from a media query,
+     * because it decides whether the scrim *exists* (#171) —
+     * `job-band`'s rule, and a stylesheet cannot express it: a
+     * `display: none` scrim is still an element with a click handler.
+     *
+     * Below 600px the panel spans the whole content area, so the scrim
+     * has no uncovered pixels: measured at 424x439, host, panel and
+     * scrim are all 424x318 with the scrim entirely underneath. It dims
+     * nothing and dismisses nothing there, and the queue is a *screen*
+     * at that width anyway (#55) — back and a 44px close button are its
+     * ways out. Between 600 and 899 the panel is a 320px column of a
+     * wider content area, the scrim is reachable, and #24's
+     * tap-outside-to-close is real; that band is untouched.
+     */
+    @state() private phone = false;
+
+    private phoneQuery?: MediaQueryList;
+
     @state()
     private isDragging = false;
 
@@ -140,13 +161,13 @@ export class QueuePanel
     private delegationAttached = false;
 
     @query('#add-to-playlist-popup')
-    private addToPlaylistPopup!: WaPopup;
+    private addToPlaylistPopup!: MenuSurface;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
     /** Unsubscribes the credit-arrival repaint. */
     private creditsUnsub?: () => void;
@@ -305,11 +326,11 @@ export class QueuePanel
     // ContextMenuHost interface
     // =================================================================
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -390,6 +411,8 @@ export class QueuePanel
             display: none;
         }
 
+        /* Overlay only, and above 600px only -- see the phone field,
+           which is where that half is decided (#171). */
         .scrim {
             position: absolute;
             inset: 0;
@@ -413,10 +436,10 @@ export class QueuePanel
 
             /* A screen's way out has to be hittable with a thumb.
                Measured at 424x439 before #55: these were **25x21px**,
-               and with the panel spanning the whole width the scrim
-               underneath has no uncovered pixels at all -- so it was
-               the only pointer route out of a full-screen surface.
-               Back answers it now as well, which is the other half.
+               and with the panel spanning the whole width there is no
+               scrim here at all (#171) -- so this is the only pointer
+               route out of a full-screen surface. Back answers it now
+               as well, which is the other half.
 
                Sized only in overlay mode: inline these sit in a 320px
                column beside the content, where a mouse is what reaches
@@ -638,23 +661,42 @@ export class QueuePanel
             text-overflow: ellipsis;
         }
 
+        /*
+         * The per-row remove is a hover affordance, and on a device
+         * without hover it is redundant rather than missing: the row's
+         * context menu is a bottom sheet since #60 and carries "Remove
+         * from Queue", so the action is one long-press away. An
+         * always-visible X would instead spend part of a 424px row on
+         * something already reachable. #68's treatment, for #68's reason.
+         *
+         * display:none outside the query rather than visibility:hidden:
+         * a hidden button still occupies its hit area and is still in
+         * the accessibility tree, so a phone would keep a target for a
+         * control it can never see.
+         */
         .remove-button {
-            background: none;
-            border: none;
-            color: var(--yj-text-tertiary, #888);
-            cursor: pointer;
-            padding: 4px;
-            display: flex;
-            align-items: center;
-            visibility: hidden;
+            display: none;
         }
 
-        .track-item:hover .remove-button {
-            visibility: visible;
-        }
+        @media (hover: hover) and (pointer: fine) {
+            .remove-button {
+                background: none;
+                border: none;
+                color: var(--yj-text-tertiary, #888);
+                cursor: pointer;
+                padding: 4px;
+                display: flex;
+                align-items: center;
+                visibility: hidden;
+            }
 
-        .remove-button:hover {
-            color: var(--yj-error-text, #ff8787);
+            .track-item:hover .remove-button {
+                visibility: visible;
+            }
+
+            .remove-button:hover {
+                color: var(--yj-error-text, #ff8787);
+            }
         }
 
         .list-area.drag-over {
@@ -827,6 +869,12 @@ export class QueuePanel
         // desktop width rather than the minimum.
         this.updateOverlayMode();
 
+        // Read here rather than in a field initialiser, so a test can
+        // install its own matchMedia before the element is created.
+        this.phoneQuery = window.matchMedia?.(PHONE_QUERY);
+        this.phone = this.phoneQuery?.matches ?? false;
+        this.phoneQuery?.addEventListener('change', this.onPhoneMedia);
+
         if (this.parentElement) {
             this.spaceObserver = new ResizeObserver(() =>
                 this.updateOverlayMode(),
@@ -869,6 +917,8 @@ export class QueuePanel
         this.creditsUnsub = undefined;
         this.spaceObserver?.disconnect();
         this.spaceObserver = undefined;
+        this.phoneQuery?.removeEventListener('change', this.onPhoneMedia);
+        this.phoneQuery = undefined;
         document.removeEventListener('keydown', this.onOverlayKeydown);
         document.removeEventListener(
             'mousemove',
@@ -935,6 +985,10 @@ export class QueuePanel
         this.overlay = available - this.panelWidth < MAIN_PANEL_FLOOR;
     };
 
+    private onPhoneMedia = (e: MediaQueryListEvent): void => {
+        this.phone = e.matches;
+    };
+
     /**
      * Escape closes a scrimmed overlay, which is the one keyboard rule
      * every dialog in this app already follows.
@@ -1092,7 +1146,7 @@ export class QueuePanel
         }
     }
 
-    private closePlaylistPicker() {
+    private closePlaylistPicker = () => {
         if (!this.playlistPickerOpen) return;
 
         this.playlistPickerOpen = false;
@@ -1102,7 +1156,7 @@ export class QueuePanel
         if (popup) {
             popup.active = false;
         }
-    }
+    };
 
     private onPlaylistActionComplete = () => {
         this.closePlaylistPicker();
@@ -1971,7 +2025,7 @@ export class QueuePanel
         const tracks = this.queue.tracks;
 
         return html`
-            ${this.overlay
+            ${this.overlay && !this.phone
                 ? html`<div
                       class="scrim"
                       part="scrim"
@@ -2042,9 +2096,11 @@ export class QueuePanel
                     </div>
                 </div>
 
-                <wa-popup
+                <menu-surface
                     id="add-to-playlist-popup"
+                    label="Add to playlist"
                     placement="bottom-end"
+                    @menu-dismiss=${this.closePlaylistPicker}
                     .active=${this.playlistPickerOpen}
                 >
                     ${this.playlistPickerOpen
@@ -2060,7 +2116,7 @@ export class QueuePanel
                               ></playlist-picker>
                           `
                         : nothing}
-                </wa-popup>
+                </menu-surface>
 
                 <div
                     class="list-area"
@@ -2103,11 +2159,8 @@ export class QueuePanel
                 </div>
             </div>
 
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu.contextMenuOpen}
             >
                 ${this.ctxMenu.contextMenuOpen
@@ -2195,13 +2248,12 @@ export class QueuePanel
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu.playlistSubmenuOpen}
             >
                 ${this.ctxMenu.playlistSubmenuOpen &&
@@ -2224,7 +2276,7 @@ export class QueuePanel
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
             <track-details></track-details>
         `;

frontend/src/components/smart-playlist-details/smart-playlist-details.ts

@@ -26,7 +26,7 @@ import {
     contextMenuStyles,
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { focusRovingRow, nextRovingIndex } from '@utils/roving-rows';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import {
@@ -40,7 +40,8 @@ import {
 } from '@utils/drag-image';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@lit-labs/virtualizer';
 import type { LitVirtualizer } from '@lit-labs/virtualizer';
@@ -176,10 +177,10 @@ export class SmartPlaylistDetails
     private dragImageEl: HTMLElement | null = null;
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
     @query('track-details')
     private trackDetailsDialog!: TrackDetails;
@@ -188,11 +189,11 @@ export class SmartPlaylistDetails
     // ContextMenuHost interface
     // =================================================================
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -1465,11 +1466,8 @@ export class SmartPlaylistDetails
 
     private renderContextMenu() {
         return html`
-            <wa-popup
+            <menu-surface
                 id="context-menu"
-                placement="bottom-start"
-                flip
-                shift
                 .active=${this.ctxMenu.contextMenuOpen}
             >
                 ${this.ctxMenu.contextMenuOpen
@@ -1583,13 +1581,12 @@ export class SmartPlaylistDetails
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
 
-            <wa-popup
+            <menu-surface
                 id="playlist-submenu"
+                label="Add to playlist"
                 placement="right-start"
-                flip
-                shift
                 .active=${this.ctxMenu
                     .playlistSubmenuOpen}
             >
@@ -1616,7 +1613,7 @@ export class SmartPlaylistDetails
                           </div>
                       `
                     : nothing}
-            </wa-popup>
+            </menu-surface>
         `;
     }
 }

frontend/src/components/track-details/track-details.ts

@@ -529,6 +529,44 @@ export class TrackDetails extends LitElement {
             background: var(--yj-error, #e03131);
         }
 
+        /*
+         * Both are the *only* route to changing or removing a track's
+         * cover art, so where the device has no hover they are always
+         * visible rather than hidden — the inverse of #68's rule, which
+         * applies where the hover control is redundant. Revealed by
+         * opacity, so what is on screen is what the desktop reveal shows
+         * and nothing about the layout moves.
+         */
+        @media not all and (hover: hover) {
+            /* The × is genuinely the only route to removing the art, so
+               on a device that cannot hover it is simply always there.
+
+               The pen is not: .cover-art-edit carries the click that
+               opens the file picker, so tapping the artwork already
+               worked while the overlay was invisible. It is a discovery
+               hint — and paying for discovery by covering the artwork
+               being edited in 50% black, permanently, on every touch
+               device, is heavier than the hint is worth. It becomes a
+               corner chip in the remove button's own visual language
+               instead: same size, same disc, same alpha. */
+            .cover-art-remove {
+                opacity: 1;
+            }
+
+            .cover-art-overlay {
+                opacity: 1;
+                inset: auto 4px 4px auto;
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                background: rgba(0, 0, 0, 0.7);
+            }
+
+            .cover-art-overlay wa-icon {
+                font-size: 14px;
+            }
+        }
+
         /* Error message */
         .error-message {
             flex: 1;

frontend/src/components/track-list/track-list.ts

@@ -18,7 +18,7 @@ import {
     isContextMenuKey,
 } from '@utils/context-menu-controller.js';
 
-import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { SearchController } from '@store/controllers/search-controller';
 import '@components/page-header/page-header';
@@ -63,7 +63,8 @@ import type {
 } from '@lit-labs/virtualizer';
 import { flow } from '@lit-labs/virtualizer/layouts/flow.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
+import type { MenuSurface } from '../menu-surface/menu-surface';
+import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { describeError } from '@utils/describe-error';
@@ -231,18 +232,18 @@ export class TrackList
     private tracks: library.Track[] = [];
 
     @query('#context-menu')
-    private contextMenuPopup!: WaPopup;
+    private contextMenuPopup!: MenuSurface;
 
     @query('#playlist-submenu')
-    private playlistSubmenuPopup!: WaPopup;
+    private playlistSubmenuPopup!: MenuSurface;
 
     // -- ContextMenuHost interface --
 
-    getContextMenuPopup(): WaPopup | undefined {
+    getContextMenuPopup(): MenuTarget | undefined {
         return this.contextMenuPopup;
     }
 
-    getPlaylistSubmenuPopup(): WaPopup | undefined {
+    getPlaylistSubmenuPopup(): MenuTarget | undefined {
         return this.playlistSubmenuPopup;
     }
 
@@ -2323,11 +2324,8 @@ export class TrackList
             </div>
           `}
 
-      <wa-popup
+      <menu-surface
         id="context-menu"
-        placement="bottom-start"
-        flip
-        shift
         .active=${this.ctxMenu.contextMenuOpen}
       >
         ${this.ctxMenu.contextMenuOpen
@@ -2413,13 +2411,12 @@ export class TrackList
               </div>
             `
                 : nothing}
-      </wa-popup>
+      </menu-surface>
 
-      <wa-popup
+      <menu-surface
         id="playlist-submenu"
+                label="Add to playlist"
         placement="right-start"
-        flip
-        shift
         .active=${this.ctxMenu.playlistSubmenuOpen}
       >
         ${this.ctxMenu.playlistSubmenuOpen && this.selection.hasSelection
@@ -2437,7 +2434,7 @@ export class TrackList
               </div>
             `
                 : nothing}
-      </wa-popup>
+      </menu-surface>
 
       <track-details></track-details>
     `;

frontend/src/utils/context-menu-controller.ts

@@ -5,7 +5,20 @@ import type {
 } from 'lit';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 
+/**
+ * What this controller needs of a surface: something it can switch on
+ * and point at. Both `wa-popup` and `menu-surface` satisfy it.
+ */
+export type MenuTarget = HTMLElement & {
+    active: boolean;
+    anchor?: WaPopup['anchor'];
+};
+
 import { registerViewAware } from './view-lifecycle';
+import {
+    MENU_DISMISS_EVENT,
+    MENU_SHOWN_EVENT,
+} from '../components/menu-surface/menu-surface';
 
 /**
  * Host interface for components using the ContextMenuController.
@@ -17,10 +30,18 @@ export interface ContextMenuHost
     extends ReactiveControllerHost {
     updateComplete: Promise<boolean>;
     shadowRoot: ShadowRoot | null;
-    /** Return the main context-menu popup element. */
-    getContextMenuPopup(): WaPopup | undefined;
-    /** Return the playlist submenu popup element. */
-    getPlaylistSubmenuPopup(): WaPopup | undefined;
+    /**
+     * Return the main context-menu surface.
+     *
+     * `MenuSurface` since #60, which is a `wa-popup` above 600px and a
+     * bottom sheet below it. The type is the narrow shape this
+     * controller drives rather than either element, so a host that
+     * still renders a bare `wa-popup` — the playlist submenu does —
+     * satisfies it unchanged.
+     */
+    getContextMenuPopup(): MenuTarget | undefined;
+    /** Return the playlist submenu surface. */
+    getPlaylistSubmenuPopup(): MenuTarget | undefined;
     /**
      * Called when the context menu is closed by an
      * outside click/contextmenu/mousedown.  Components
@@ -33,6 +54,15 @@ export interface ContextMenuHost
 /** Submenu close delay in milliseconds. */
 const SUBMENU_CLOSE_DELAY = 150;
 
+/**
+ * How long to keep trying to put focus on a menu's first item.
+ *
+ * Long enough to outlast `wa-dialog`'s show animation, which ends by
+ * focusing the dialog; short enough that a menu which genuinely has no
+ * items stops rather than spinning for the life of the page.
+ */
+const FOCUS_RETRY_BUDGET_MS = 500;
+
 /** A menu item, focusable and clickable. Web Awesome sets `role` itself. */
 type MenuItem = HTMLElement & { active?: boolean; disabled?: boolean };
 
@@ -73,6 +103,30 @@ export class MenuKeyboard {
         void this.focusFirstItem(panel);
     }
 
+    /**
+     * Take focus back, for a surface that finished showing after we
+     * had already placed it.
+     *
+     * `wa-dialog` focuses `[autofocus]` or *itself* on the animation
+     * frame after `showModal()`, and it cannot see our first menu item
+     * to prefer it: the panel is slotted through `menu-surface`, so the
+     * dialog's own `querySelector` stops at the `<slot>`. Retrying on a
+     * longer budget does not fix this either -- the first attempt
+     * *succeeds*, and the steal happens afterwards. Measured on the
+     * device: the sheet opened with focus on the `<dialog>` and every
+     * arrow key went nowhere.
+     *
+     * So the surface says when it has settled and this re-asserts. It
+     * is a no-op for a menu that is closed or that already has focus.
+     */
+    refocus(): void {
+        const panel = this.panel;
+
+        if (!panel || panel.contains(deepActiveElement())) return;
+
+        void this.focusFirstItem(panel);
+    }
+
     /**
      * Focus the first item, once the items are items.
      *
@@ -91,11 +145,24 @@ export class MenuKeyboard {
 
         await Promise.all(candidates.map((el) => el.updateComplete ?? null));
 
-        // …and once the popup has positioned itself. `wa-popup` places the
+        // …and once the surface has shown itself. `wa-popup` places the
         // panel on an animation frame, and `focus()` on a not-yet-shown
         // element is a silent no-op — which looks identical to a menu
         // that opened and refused to take focus.
-        for (let attempt = 0; attempt < 3; attempt++) {
+        //
+        // **The budget is time, not frames, because #60 gave this a
+        // second kind of surface.** Three frames was enough for a
+        // popup; a `wa-dialog` runs a show *animation* and moves focus
+        // to the dialog itself when it finishes, which lands after
+        // those frames and takes the focus back. Measured on the
+        // device: the sheet opened with `document.activeElement` on the
+        // `<dialog>`, so every arrow key went nowhere. Retrying to a
+        // deadline is `roving-grid`'s rule for the same reason — the
+        // thing being waited for is another component's animation, not
+        // a fixed number of paints.
+        const deadline = Date.now() + FOCUS_RETRY_BUDGET_MS;
+
+        while (Date.now() < deadline) {
             // Bail if the menu closed while we waited.
             if (this.panel !== panel) return;
 
@@ -259,6 +326,20 @@ export class ContextMenuController
     /** Bound close handler for document events. */
     private closeHandler = () => this.close();
 
+    /**
+     * A surface finished showing; see `MenuKeyboard.refocus`.
+     *
+     * **Not while the submenu is up.** Both surfaces send this, and the
+     * submenu's sheet opens *over* the main one -- so re-asserting
+     * focus on the main panel's first item would snatch it straight
+     * back out of the playlist picker the user just opened.
+     */
+    private shownHandler = () => {
+        if (this.contextMenuOpen && !this.playlistSubmenuOpen) {
+            this.keyboard.refocus();
+        }
+    };
+
     /** Bound mousedown handler for outside-click detection. */
     private mousedownCloseHandler = (
         e: MouseEvent,
@@ -325,12 +406,28 @@ export class ContextMenuController
             'mousedown',
             this.mousedownCloseHandler,
         );
+        document.addEventListener(
+            MENU_DISMISS_EVENT,
+            this.closeHandler,
+        );
+        document.addEventListener(
+            MENU_SHOWN_EVENT,
+            this.shownHandler,
+        );
     }
 
     private detach(): void {
         if (!this.listening) return;
 
         this.listening = false;
+        document.removeEventListener(
+            MENU_DISMISS_EVENT,
+            this.closeHandler,
+        );
+        document.removeEventListener(
+            MENU_SHOWN_EVENT,
+            this.shownHandler,
+        );
         document.removeEventListener(
             'click',
             this.closeHandler,
@@ -550,6 +647,48 @@ export const contextMenuStyles = css`
         z-index: 200;
     }
 
+    /* ---------------------------------------------------------------
+       The sheet (#60).
+
+       menu-surface puts data-sheet on the panel when it is drawn
+       as a bottom sheet, and these rules are here rather than in that
+       component because the panel is the *host's* light DOM: it lives
+       in the host's shadow root, so only the host's stylesheet can
+       reach it. This file is the one every call site already includes,
+       which is what makes twelve menus grow thumb-sized rows from one
+       edit.
+
+       Measured on the device before the change: rows were 29px, against
+       the 44px floor plan 018 promises and the 48px this issue asks
+       for. --------------------------------------------------------- */
+    .context-menu-panel[data-sheet] {
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        min-width: 0;
+        padding: 4px 0 8px;
+        background-color: transparent;
+    }
+
+    .context-menu-panel[data-sheet] wa-dropdown-item {
+        font-size: var(--yj-text-md, 0.9375rem);
+        min-height: 48px;
+        align-items: center;
+    }
+
+    .context-menu-panel[data-sheet] wa-dropdown-item::part(base) {
+        min-height: 48px;
+        align-items: center;
+    }
+
+    /* A submenu arrow means "a flyout opens to the right", which is not
+       what happens on a phone and is not a thing a thumb can aim at.
+       The row still works — it is the tap handler that opens the
+       playlist picker — so what goes is the arrow, not the item. */
+    .context-menu-panel[data-sheet] .submenu-arrow {
+        display: none;
+    }
+
     .context-menu-panel {
         background-color: var(
             --yj-bg-elevated,

frontend/test/components/hover-affordance.test.ts

@@ -1,5 +1,6 @@
 /**
- * A hover affordance is gated on the device having hover.
+ * A hover affordance is gated on the device having hover — in whichever
+ * direction keeps the action reachable.
  *
  * The home page's cover cards reveal a play button on :hover. A touch
  * long-press synthesises a hover state in the WebView, so on a phone
@@ -7,6 +8,15 @@
  * utils/long-press.ts is measuring for a context menu — a control
  * appearing because the user was reaching for a different one.
  *
+ * #137 is the same sweep with the opposite answer for two of its three
+ * cases. Where the revealed control is the *only* route to its action,
+ * hiding it removes the action, so it is always visible where there is
+ * no hover: `track-details`'s cover-art overlay and remove, and
+ * `shortcut-capture`'s reset. The queue's per-row remove is the third,
+ * and is the redundant kind — since #60 the row's context menu is a
+ * bottom sheet carrying "Remove from Queue" — so it takes #68's
+ * treatment here.
+ *
  * This is asserted against the *parsed stylesheet* rather than by
  * emulating a touch device, and that is a limitation worth stating
  * rather than hiding. CDP's Emulation.setEmulatedMedia does not reach
@@ -24,6 +34,9 @@
 import { describe, expect, it } from 'vitest';
 
 import '@components/home-view/home-view';
+import '@components/queue-panel/queue-panel';
+import '@components/track-details/track-details';
+import '@components/config-page/shortcut-capture';
 import { fixture } from '@test/support/render';
 
 /** Every rule in the element's own adopted stylesheets, flattened. */
@@ -83,3 +96,91 @@ describe('the home card play button', () => {
     expect(unconditional.some((r) => /display:\s*none/.test(r.text))).toBe(true);
   });
 });
+
+describe("the queue row's remove button", () => {
+  it('is absent where the device has no hover, the menu carrying the action', async () => {
+    const el = await fixture('queue-panel', {});
+    const rules = rulesOf(el);
+
+    expect(rules.length).toBeGreaterThan(0);
+
+    // visibility:hidden alone would leave an invisible button holding
+    // its hit area on a phone, which is the trap #68's commit names.
+    const unconditional = rules.filter(
+      (r) => r.condition === null && r.text.startsWith('.remove-button'),
+    );
+
+    expect(unconditional.length).toBeGreaterThan(0);
+    expect(unconditional.some((r) => /display:\s*none/.test(r.text))).toBe(true);
+
+    const reveals = rules.filter(
+      (r) =>
+        r.text.includes('.remove-button') && /visibility:\s*visible/.test(r.text),
+    );
+
+    expect(reveals.length).toBeGreaterThan(0);
+
+    for (const rule of reveals) {
+      expect(rule.condition).toMatch(/hover:\s*hover/);
+      expect(rule.condition).toMatch(/pointer:\s*fine/);
+    }
+  });
+});
+
+/**
+ * The two affordances that are the only route to their action.
+ *
+ * Asserted as "there is a rule showing it, and its condition is a
+ * *negated* hover query" — the same stylesheet reading as above, for
+ * the same reason: this tier's iframe cannot be emulated as a touch
+ * device, and the regression worth catching is someone folding the rule
+ * away as redundant on the desktop it does nothing on.
+ */
+describe('an affordance with no other route', () => {
+  const cases: Array<[string, string, string[]]> = [
+    ['track-details', 'track-details', ['.cover-art-overlay', '.cover-art-remove']],
+    ['shortcut-capture', 'shortcut-capture', ['.reset-btn']],
+  ];
+
+  for (const [name, tag, selectors] of cases) {
+    it(`${name} shows it where the device has no hover`, async () => {
+      const el = await fixture(tag, {});
+      const rules = rulesOf(el);
+
+      expect(rules.length).toBeGreaterThan(0);
+
+      for (const selector of selectors) {
+        const shown = rules.filter(
+          (r) =>
+            r.condition !== null &&
+            r.text.includes(selector) &&
+            /opacity:\s*1/.test(r.text),
+        );
+
+        const touch = shown.filter((r) => /not[\s\S]*hover:\s*hover/.test(r.condition!));
+
+        expect(touch.length).toBeGreaterThan(0);
+      }
+    });
+  }
+
+  // The one half this tier can measure rather than read: the query is
+  // negated, so on the hover-capable browser running these tests the
+  // control must still be revealed by hover and by nothing else. A rule
+  // written without the `not` would show it here, permanently, on every
+  // desktop.
+  it('leaves the desktop reveal alone, where the device does have hover', async () => {
+    expect(matchMedia('(hover: hover)').matches).toBe(true);
+
+    const el = await fixture('shortcut-capture', {
+      action: 'player.next',
+      label: 'Next Track',
+      currentKey: 'X',
+      defaultKey: 'N',
+    });
+    const btn = el.shadowRoot?.querySelector('.reset-btn');
+
+    expect(btn).not.toBeNull();
+    expect(getComputedStyle(btn!).opacity).toBe('0');
+  });
+});

frontend/test/components/menu-surface.test.ts

@@ -0,0 +1,222 @@
+/**
+ * Where a context menu is drawn (#60).
+ *
+ * **This file asserts the mechanism, not the symptom, and that is the
+ * whole point of it.** The defect is that on the reference device's
+ * Chrome 113 a `wa-popup` has no Popover API to promote it to the top
+ * layer, so it falls back to `position: fixed` and is then *clipped* by
+ * `.main-panel`'s `contain: paint`. No tier here can reproduce that:
+ * this runner's Chromium and CI's WebKit both have the Popover API, so
+ * the popup is top-layered and looks perfectly correct. A test that
+ * asserted "the menu is not clipped" would pass on the broken build.
+ *
+ * What is checkable everywhere is *which surface exists*. A native
+ * `<dialog>` uses the real top layer, which Chrome 37 has, so "it is a
+ * dialog at phone width" is the property that makes the device
+ * behaviour follow. The measurements that needed the hardware are on
+ * the PR and in `.planning/NOTES.md`.
+ */
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+
+import '@components/menu-surface/menu-surface';
+import { MENU_DISMISS_EVENT } from '@components/menu-surface/menu-surface';
+import { fixture } from '@test/support/render';
+
+/** Every source file, as text. */
+const SOURCES = import.meta.glob<string>('../../src/**/*.ts', {
+  eager: true,
+  query: '?raw',
+  import: 'default',
+});
+
+/**
+ * The two files allowed to render a raw `wa-popup`.
+ *
+ * `menu-surface` *is* the popup, in its desktop presentation.
+ * `job-indicator` is the documented exception and the contrast that
+ * proved the diagnosis: it lives in `.top-bar`, no ancestor of which
+ * has containment, so even the fixed fallback lands correctly on the
+ * device -- measured on #62, unclipped at every width.
+ *
+ * `now-playing`'s cover preview is the third, and it is a different
+ * reason: it is not a menu. It opens on `mouseenter` over the album
+ * art, so a touch device never sees it at all, and a bottom sheet for
+ * a hover preview would be absurd. It is also in the bottom bar rather
+ * than the main panel, so nothing clips it either.
+ *
+ * **Both were found by this sweep, not by the conversion**, which is
+ * the argument for having it: twelve call sites were converted by hand
+ * and two more existed.
+ */
+const MAY_USE_POPUP = [
+  'menu-surface/menu-surface.ts',
+  'jobs/job-indicator.ts',
+  'now-playing/now-playing.ts',
+];
+
+/**
+ * Answer `matchMedia` for the phone query, on `transport-context`'s
+ * pattern: what is under test is the component's reaction to the
+ * answer, not whether this runner's window can get below 600px.
+ */
+const realMatchMedia = window.matchMedia;
+
+function pretendPhone(phone: boolean): void {
+  window.matchMedia = ((query: string) => ({
+    matches: phone && query.includes('599'),
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })) as unknown as typeof window.matchMedia;
+}
+
+/** A surface with the panel a real call site slots into it. */
+async function surfaceWithPanel(): Promise<HTMLElement> {
+  const el = await fixture('menu-surface');
+
+  el.innerHTML =
+    '<div class="context-menu-panel" role="menu" aria-label="Track actions">' +
+    '<wa-dropdown-item>Play</wa-dropdown-item>' +
+    '</div>';
+
+  const surface = el as unknown as HTMLElement & {
+    active: boolean;
+    updateComplete: Promise<unknown>;
+  };
+
+  surface.active = true;
+  await surface.updateComplete;
+
+  return el;
+}
+
+/**
+ * The sweep, in the spirit of `icon-language.test.ts` and
+ * `TestNoDirectRuntimeEmits`: the rule is about *every* call site, and
+ * checking one checks nothing.
+ *
+ * Twelve menus were converted by hand. A thirteenth written as a bare
+ * `<wa-popup>` would work perfectly in every tier here and be clipped
+ * on the device, which is exactly the failure this whole change is
+ * about and exactly the one no runtime assertion can see.
+ */
+describe('every menu goes through the one surface', () => {
+  it('reads the sources at all', () => {
+    // A sweep over an empty glob passes, so this is asserted first.
+    expect(Object.keys(SOURCES).length).toBeGreaterThan(100);
+  });
+
+  it('leaves no raw wa-popup outside the two files allowed one', () => {
+    const offenders = Object.entries(SOURCES)
+      .filter(([path]) => !MAY_USE_POPUP.some((ok) => path.endsWith(ok)))
+      .filter(([, src]) => src.includes('<wa-popup'))
+      .map(([path]) => path.replace(/^.*\/src\//, 'src/'));
+
+    expect(
+      offenders,
+      'these render a popup directly; use <menu-surface> so the phone gets a sheet',
+    ).toEqual([]);
+  });
+});
+
+describe('menu-surface', () => {
+  afterEach(() => {
+    window.matchMedia = realMatchMedia;
+  });
+
+  describe('above the phone breakpoint', () => {
+    beforeEach(() => pretendPhone(false));
+
+    it('draws a popup, which is what the desktop has always had', async () => {
+      const el = await surfaceWithPanel();
+
+      expect(el.shadowRoot?.querySelector('wa-popup')).not.toBeNull();
+      expect(el.shadowRoot?.querySelector('wa-dialog')).toBeNull();
+    });
+
+    it('does not mark the panel as a sheet', async () => {
+      const el = await surfaceWithPanel();
+
+      expect(
+        el.querySelector('.context-menu-panel')?.hasAttribute('data-sheet'),
+      ).toBe(false);
+    });
+  });
+
+  describe('at phone width', () => {
+    beforeEach(() => pretendPhone(true));
+
+    /**
+     * The load-bearing one. `wa-dialog` renders a *native* `<dialog>`,
+     * and it is the native element -- not the wrapper -- that gets the
+     * top layer and therefore escapes the paint containment that clips
+     * the popup on the device.
+     */
+    it('draws a native dialog, which is what escapes the clip', async () => {
+      const el = await surfaceWithPanel();
+
+      const wrapper = el.shadowRoot?.querySelector('wa-dialog');
+
+      expect(wrapper, 'no wa-dialog at phone width').not.toBeNull();
+      expect(el.shadowRoot?.querySelector('wa-popup')).toBeNull();
+
+      await (wrapper as HTMLElement & { updateComplete: Promise<unknown> })
+        .updateComplete;
+
+      expect(
+        wrapper?.shadowRoot?.querySelector('dialog'),
+        'the wrapper is not backed by a native dialog',
+      ).not.toBeNull();
+    });
+
+    /**
+     * The rows are sized by `contextMenuStyles`, which lives in the
+     * *host's* shadow root — so the only thing this component can do is
+     * say which mode it is in. That attribute is the contract between
+     * the two, and it is what twelve call sites get their thumb-sized
+     * rows from.
+     */
+    it('marks the panel as a sheet, which is what sizes the rows', async () => {
+      const el = await surfaceWithPanel();
+
+      expect(
+        el.querySelector('.context-menu-panel')?.hasAttribute('data-sheet'),
+      ).toBe(true);
+    });
+
+    /**
+     * `wa-dialog` closes itself on Escape. Without this the controller
+     * would still believe the menu was open, and the *next* long-press
+     * would do nothing — which is the failure mode that looks like the
+     * gesture breaking rather than the dialog.
+     */
+    it('reports a dismissal it did not initiate', async () => {
+      const el = await surfaceWithPanel();
+
+      let dismissed = 0;
+
+      document.addEventListener(MENU_DISMISS_EVENT, () => {
+        dismissed += 1;
+      });
+
+      el.shadowRoot
+        ?.querySelector('wa-dialog')
+        ?.dispatchEvent(new CustomEvent('wa-hide', { bubbles: false }));
+
+      expect(dismissed, 'no menu-dismiss reached the document').toBe(1);
+    });
+
+    /**
+     * A dialog with no accessible name is what `utils/name-dialog.ts`
+     * exists for; here the name is already written on the panel, so no
+     * call site says it twice.
+     */
+    it('names the sheet after the menu it contains', async () => {
+      const el = await surfaceWithPanel();
+
+      const wrapper = el.shadowRoot?.querySelector('wa-dialog');
+
+      expect(wrapper?.getAttribute('label')).toBe('Track actions');
+    });
+  });
+});

frontend/test/components/progress-line.test.ts

@@ -0,0 +1,258 @@
+/**
+ * The phone's progress line (#58).
+ *
+ * **What this tier can and cannot see.** It can see the whole of what
+ * the issue asks for that is not a pixel: that the line exists only on
+ * a phone and only with a track, that it renders the position the
+ * backend reported rather than a count of its own, and that it is
+ * neither announced nor touchable. It cannot see where it sits — that
+ * is the shell's grid, and it is asserted in
+ * `e2e/specs/phone-progress-line.spec.ts` where there is a real bar
+ * with a real tab bar under it.
+ */
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+
+import '@components/audio-player/progress-line/progress-line';
+import { Events } from '../../src/events';
+import { emit, flush } from '@test/support/harness';
+import { fixture, shadow } from '@test/support/render';
+
+const TRACK = {
+    fileName: 'song.mp3',
+    filePath: '/music/song.mp3',
+    trackLength: 90,
+    seekPosition: 0,
+    state: 'playing',
+    title: 'Song',
+    artist: 'Artist',
+    album: 'Album',
+    coverArt: '',
+    coverArtSmall: '',
+    coverArtMedium: '',
+    coverArtLarge: '',
+    trackChangeId: 1,
+    artistMbid: '',
+    releaseGroupMbid: '',
+    recordingMbid: '',
+};
+
+/**
+ * Answer `matchMedia` for the phone query, since the runner's own
+ * window is whatever size the browser provider gives it. Stubbed rather
+ * than resized for `transport-context.test.ts`'s reason: what is under
+ * test is the component's reaction to the answer.
+ */
+const realMatchMedia = window.matchMedia;
+
+function pretendPhone(phone: boolean): void {
+    window.matchMedia = ((query: string) => ({
+        matches: phone && query.includes('599'),
+        media: query,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+    })) as unknown as typeof window.matchMedia;
+}
+
+/** The horizontal scale of the fill, or null if there is no line. */
+function scale(el: Element): number | null {
+    const fill = shadow<HTMLElement>(el, '.fill');
+
+    if (!fill) return null;
+
+    const match = /scaleX\(([^)]+)\)/.exec(fill.style.transform);
+
+    return match ? Number(match[1]) : null;
+}
+
+describe('<player-progress-line>', () => {
+    beforeEach(() => {
+        emit(Events.TrackChanged, null);
+        emit(Events.PlaybackStateChanged, { state: 'stopped' });
+    });
+
+    afterEach(() => {
+        window.matchMedia = realMatchMedia;
+        vi.useRealTimers();
+    });
+
+    it('draws nothing above the phone breakpoint', async () => {
+        pretendPhone(false);
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 2 });
+        emit(Events.PlaybackPositionChanged, {
+            positionSeconds: 45,
+            trackLength: 90,
+            trackChangeId: 2,
+            seq: 1,
+            playing: true,
+        });
+        await flush();
+        await el.updateComplete;
+
+        // The desktop bar carries a real seek bar, and there is no tab
+        // bar for this to sit on the border of.
+        expect(el.shadowRoot!.querySelector('.track')).toBeNull();
+    });
+
+    it('draws nothing until there is a track', async () => {
+        pretendPhone(true);
+
+        const el = await fixture('player-progress-line');
+
+        expect(el.shadowRoot!.querySelector('.track')).toBeNull();
+    });
+
+    it('renders the fraction the backend reported', async () => {
+        pretendPhone(true);
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 3 });
+        emit(Events.PlaybackPositionChanged, {
+            positionSeconds: 45,
+            trackLength: 90,
+            trackChangeId: 3,
+            seq: 1,
+            playing: true,
+        });
+        await flush();
+        await el.updateComplete;
+
+        expect(scale(el)).toBeCloseTo(0.5, 3);
+    });
+
+    it('resumes mid-track at the position the track arrived with', async () => {
+        pretendPhone(true);
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, {
+            ...TRACK,
+            seekPosition: 30,
+            trackChangeId: 4,
+        });
+        await flush();
+        await el.updateComplete;
+
+        expect(scale(el)).toBeCloseTo(1 / 3, 3);
+    });
+
+    it('interpolates between reports, and every report resets it', async () => {
+        pretendPhone(true);
+        vi.useFakeTimers();
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 5 });
+        emit(Events.PlaybackStateChanged, { state: 'playing' });
+        await vi.advanceTimersByTimeAsync(3000);
+        await el.updateComplete;
+
+        expect(scale(el)).toBeCloseTo(3 / 90, 3);
+
+        // The user seeks; the backend lands somewhere else and says so.
+        // The local count is discarded, never added to -- the seek
+        // bar's rule, and the reason it has it.
+        emit(Events.PlaybackPositionChanged, {
+            positionSeconds: 40,
+            trackLength: 90,
+            trackChangeId: 5,
+            seq: 2,
+            playing: true,
+        });
+        await vi.advanceTimersByTimeAsync(1000);
+        await el.updateComplete;
+
+        expect(scale(el)).toBeCloseTo(41 / 90, 3);
+    });
+
+    /*
+     * The reason this component asks `matchMedia` instead of letting a
+     * stylesheet hide it: a media query cannot stop a 1 Hz interval
+     * running for the life of every desktop session. That claim is
+     * load-bearing in CLAUDE.md, so it is asserted rather than
+     * described — the timer count, because a desktop render is empty
+     * either way and so cannot tell the two apart.
+     */
+    it('runs no interpolation timer above the breakpoint', async () => {
+        pretendPhone(false);
+        vi.useFakeTimers();
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 9 });
+        emit(Events.PlaybackStateChanged, { state: 'playing' });
+        emit(Events.PlaybackPositionChanged, {
+            positionSeconds: 3,
+            trackLength: 90,
+            trackChangeId: 9,
+            seq: 9,
+            playing: true,
+        });
+        await vi.advanceTimersByTimeAsync(5000);
+        await el.updateComplete;
+
+        expect(scale(el)).toBeNull();
+        expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it('ignores a report about a track that is no longer loaded', async () => {
+        pretendPhone(true);
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 6 });
+        emit(Events.PlaybackPositionChanged, {
+            positionSeconds: 60,
+            trackLength: 90,
+            trackChangeId: 5,
+            seq: 3,
+            playing: true,
+        });
+        await flush();
+        await el.updateComplete;
+
+        // The store is a singleton, so a line mounting late must not
+        // adopt a report about the previous track.
+        expect(scale(el)).toBe(0);
+    });
+
+    it('counts nothing while the player is paused', async () => {
+        pretendPhone(true);
+        vi.useFakeTimers();
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 7 });
+        emit(Events.PlaybackPositionChanged, {
+            positionSeconds: 10,
+            trackLength: 90,
+            trackChangeId: 7,
+            seq: 1,
+            playing: false,
+        });
+        emit(Events.PlaybackStateChanged, { state: 'paused' });
+        await vi.advanceTimersByTimeAsync(5000);
+        await el.updateComplete;
+
+        expect(scale(el)).toBeCloseTo(10 / 90, 3);
+    });
+
+    it('is decorative and cannot be touched', async () => {
+        pretendPhone(true);
+
+        const el = await fixture('player-progress-line');
+
+        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 8 });
+        await flush();
+        await el.updateComplete;
+
+        // The seek bar on Now Playing is what announces the position;
+        // this says the same thing with no name and no way to act on
+        // it, and it sits exactly where a thumb aiming at a tab lands.
+        expect(el.getAttribute('aria-hidden')).toBe('true');
+        expect(getComputedStyle(el).pointerEvents).toBe('none');
+    });
+});

frontend/test/components/queue-overlay-mode.test.ts

@@ -29,8 +29,61 @@ import { shadow } from '@test/support/render';
 
 const wrappers: HTMLElement[] = [];
 
+let restoreMedia: (() => void) | null = null;
+
+/**
+ * Answer the shell's phone query with `phone` until restored.
+ *
+ * Stubbed rather than emulated, for the reason `search-dialog.test.ts`
+ * gives: the runner's viewport is fixed at 1280x800, and the panel
+ * reads `matchMedia` in `connectedCallback` precisely so a test can
+ * answer it first.
+ */
+/**
+ * Answering the phone query is not enough on its own: what decides
+ * whether the scrim exists is a `change` listener, and a stub whose
+ * `addEventListener` is a no-op leaves that listener untested — the
+ * whole suite stays green with it deleted. So the stub records the
+ * listeners and hands back a way to fire them.
+ */
+function stubPhone(phone: boolean): (next: boolean) => void {
+  const real = window.matchMedia.bind(window);
+  const listeners = new Set<(e: MediaQueryListEvent) => void>();
+  let matches = phone;
+
+  window.matchMedia = ((q: string) =>
+    q.includes('max-width: 599px')
+      ? {
+          get matches() {
+            return matches;
+          },
+          media: q,
+          addEventListener(_: string, fn: (e: MediaQueryListEvent) => void) {
+            listeners.add(fn);
+          },
+          removeEventListener(_: string, fn: (e: MediaQueryListEvent) => void) {
+            listeners.delete(fn);
+          },
+        }
+      : real(q)) as typeof window.matchMedia;
+
+  restoreMedia = () => {
+    window.matchMedia = real;
+  };
+
+  return (next: boolean) => {
+    matches = next;
+
+    for (const fn of listeners) {
+      fn({ matches: next } as MediaQueryListEvent);
+    }
+  };
+}
+
 afterEach(() => {
   for (const w of wrappers.splice(0)) w.remove();
+  restoreMedia?.();
+  restoreMedia = null;
 });
 
 /**
@@ -157,6 +210,78 @@ describe('the queue panel decides whether it can be a column', () => {
     }
   });
 
+  /**
+   * #171 — the scrim is a dismissal target, so it exists only where it
+   * has pixels to be tapped.
+   *
+   * Below 600px `.panel-content` is `width: 100%`, so the scrim is
+   * entirely underneath an opaque panel: measured at 424x439, host,
+   * panel and scrim all 424x318. Drawing it there is a `cursor:
+   * pointer` click target nobody can reach, and the queue is a screen
+   * at that width anyway (#55) — back and the close button are its ways
+   * out. Existence rather than `display: none`, because a hidden scrim
+   * is still an element carrying the handler.
+   */
+  it('draws no scrim at phone width, where it would have no reachable pixels', async () => {
+    stubPhone(true);
+
+    const el = await panelIn(424);
+
+    expect(el.overlay).toBe(true);
+    expect(el.shadowRoot?.querySelector('.scrim')).toBeNull();
+
+    // The way out a thumb can hit is still there.
+    expect(
+      shadow(el, '[data-testid="queue-close"]')?.getAttribute('aria-label'),
+    ).toBe('Close queue');
+  });
+
+  /**
+   * The 600–899 band is where the panel is a 320px column of a wider
+   * content area, so the scrim has uncovered pixels and #24's
+   * tap-outside-to-close is real. Same width as the overlay tests
+   * above, with the phone query explicitly answered `false`, so this
+   * fails if the scrim is ever dropped for every overlay.
+   */
+  it('keeps the scrim above phone width, where it can be tapped', async () => {
+    stubPhone(false);
+
+    const el = await panelIn(700);
+
+    expect(el.overlay).toBe(true);
+
+    shadow<HTMLElement>(el, '.scrim')?.click();
+    await el.updateComplete;
+
+    expect(el.open).toBe(false);
+  });
+
+  /**
+   * The scrim's existence comes from `matchMedia` rather than a
+   * stylesheet, which only holds up if the query is *listened* to — a
+   * panel opened on a desktop and carried across the breakpoint (a
+   * resized window, an unfolded phone) has to lose its scrim without
+   * being reopened. Nothing else in this file fires `change`, so
+   * deleting the listener leaves the whole suite green.
+   */
+  it('drops the scrim when the viewport crosses the breakpoint', async () => {
+    const setPhone = stubPhone(false);
+
+    const el = await panelIn(700);
+
+    expect(el.shadowRoot?.querySelector('.scrim')).not.toBeNull();
+
+    setPhone(true);
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.scrim')).toBeNull();
+
+    setPhone(false);
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.scrim')).not.toBeNull();
+  });
+
   /**
    * Escape belongs to the overlay, not to the queue. An inline panel is
    * beside the content rather than over it, so there is nothing to

frontend/test/utils/css-nesting.test.ts

@@ -0,0 +1,79 @@
+/**
+ * The nesting check's own semantics.
+ *
+ * `make css-check` runs it over a tree that currently has no violation,
+ * so the check passing says nothing about whether it can still find
+ * one. What it has to get right is two distinctions, and both are the
+ * kind a regex over the file gets wrong: a rule directly inside an
+ * at-rule is not nested, and a brace inside a string or a comment is
+ * not a block.
+ *
+ * The rule it enforces is the device's: Chrome 113 predates relaxed CSS
+ * nesting, so a nested selector starting with an element name is
+ * dropped in silence. See `scripts/css-nesting.mjs`.
+ */
+import { describe, expect, it } from 'vitest';
+
+import { findBareNestedRules } from '../../scripts/css-nesting.mjs';
+
+describe('the nested-rule check', () => {
+  it('flags a nested rule that starts with an element name', () => {
+    const found = findBareNestedRules(
+      '.bottom-bar {\n    color: red;\n\n    audio-player { margin: 0 }\n}',
+    );
+
+    expect(found).toEqual([{ line: 4, selector: 'audio-player' }]);
+  });
+
+  it('accepts the same rule written with a leading &', () => {
+    expect(
+      findBareNestedRules('.bottom-bar {\n    & audio-player { margin: 0 }\n}'),
+    ).toEqual([]);
+  });
+
+  it('accepts a nested selector that starts with any other symbol', () => {
+    expect(
+      findBareNestedRules('.bar {\n    #track-info { color: red }\n}'),
+    ).toEqual([]);
+    expect(findBareNestedRules('.bar {\n    :host { color: red }\n}')).toEqual(
+      [],
+    );
+  });
+
+  it('leaves a top-level rule alone, element name or not', () => {
+    expect(findBareNestedRules('p {\n    margin: 0;\n}')).toEqual([]);
+  });
+
+  /**
+   * The majority of what a naive sweep would report: a media query at
+   * the top level holds ordinary rules, not nested ones.
+   */
+  it('leaves a rule directly inside an at-rule alone', () => {
+    expect(
+      findBareNestedRules(
+        '@media (max-width: 599px) {\n    bottom-nav { display: flex }\n}',
+      ),
+    ).toEqual([]);
+  });
+
+  /**
+   * And the other half of that: what decides it is whether a style rule
+   * is anywhere above, not what the immediate parent is.
+   */
+  it('flags one inside an at-rule that is itself inside a rule', () => {
+    expect(
+      findBareNestedRules(
+        '.bar {\n    @media (min-width: 900px) {\n        audio-player { margin: 0 }\n    }\n}',
+      ),
+    ).toEqual([{ line: 3, selector: 'audio-player' }]);
+  });
+
+  it('reads through a brace in a string or a comment', () => {
+    expect(
+      findBareNestedRules('.a {\n    background: url("x{y}");\n}'),
+    ).toEqual([]);
+    expect(
+      findBareNestedRules('.a {\n    /* audio-player { x: y } */\n}'),
+    ).toEqual([]);
+  });
+});

lefthook.yml

@@ -58,6 +58,15 @@ pre-commit:
       root: "frontend/"
       run: node scripts/check-css-literals.mjs
 
+    # A nested rule whose selector starts with an element name is
+    # silently dropped by the device's Chrome 113, and by nothing else --
+    # so every tier here renders it correctly and only a screenshot of
+    # the phone disagrees. Instant.
+    css-nesting:
+      glob: "frontend/**/*.{ts,css}"
+      root: "frontend/"
+      run: node scripts/check-css-nesting.mjs
+
 # Deliberately sequential, unlike pre-commit.  `go test -race`
 # saturates every core for the better part of a minute and the UI tier
 # is a real browser with wall-clock timeouts, so run together the