# Glass Stage iPhone layout follow-up

The supplied production screenshots came from build `16c08b099a31`, before the
Task A/B changes. This follow-up preserves the Glass Stage colours, glass tiles,
stroke icons and all existing control ids/actions. Every CSS rule is scoped to
`html[data-layout="glass-stage"]`; Classic retains its original rail and labels.

## Panel shortcuts and bottom chrome

The Glass section rail was a fixed horizontal overlay positioned above the mini
player. Clearing the player did not clear a panel heading or filter underneath.
`glass-panel-layout.js` moves that same rail, with its existing listeners, into
`#listPane` before the heading. It restores the original location when leaving
Glass Stage. The rail now occupies its own row instead of covering content.

The module measures the visible fixed bottom navigation and mini player. The
navigation's measured height already contains the home-indicator safe area;
the mini player sits eight pixels above that height. Scroll clearance includes
both bars and a 16 px gap, without counting the safe area twice. Portrait uses
one shared scroller and reserves that clearance once at its tail; desktop panes
reserve it individually. The mini player's outer card clips the progress strip
inside its rounded border, rather than leaving a separate line below it.

## Bottom navigation

The uploaded rightward icon shift is reproduced by the pre-Task-A CSS from
`f2c9459`: installed-PWA padding of `4px 16px` remained on a fixed-width icon box.
Task A (`79a3c28`) already resets that padding to zero. The new regression test
runs an iPhone 13 browser profile at 390 px, including 34 px bottom safe-area
allowance, Queue/Downloads badges and an active pill. In both Chromium and
WebKit, SVG and icon-box centres match label centres within 0.6 CSS px. The old
CSS shifts every icon more than eight CSS px. No further nav CSS change was
needed; this is committed verification of the existing fix.

## Notes toolbar

The toolbar's Glass override explicitly enabled `flex-wrap:wrap`. It now keeps
one row. Container queries respond to the player card's available width, even
when a desktop player column is narrow. Spacing tightens first, the longer
Chapters & bookmarks label becomes icon/count at narrow card widths, and all
labels become icon-only on the smallest cards. Full accessible names and title
hints remain. Every action retains a minimum 44 px target, and the fold chevron
stays at the row's right end. Status text truncates within the remaining space.
Glass label wrappers and added names restore exactly when switching to Classic.

## Verification

- 125 frontend unit tests pass, including measured chrome-clearance logic.
- `node --check frontend/app.js` and `bun build --no-bundle server/server.js` pass.
- Chromium and WebKit: all five panel shortcuts at 390 and 1440 px; final list
  row clears playback chrome; progress strip stays inside its card.
- Classic geometry and before/after screenshot comparisons pass in both browsers
  at 390 and 1440 px, within the 32-pixel isolated rasterization tolerance.
- iPhone-profile navigation alignment/badges pass in both engines at 390 px.
- Toolbar stays one row at 320, 360, 390, 430 and 1440 px in both engines, including
  long status text and chapter counts; theme round-trip restoration passes.
- Batched visual review of six WebKit captures found no overlap, alignment,
  clipping or wrapping defects in the requested areas.

Run `npx playwright test -c playwright.glass-panel.config.js` for the 22 browser
cases. WebKit was installed locally for these checks; these are browser/iPhone
profile tests, not tests on physical iPhone hardware. Review the installed PWA
on an actual iPhone after the reviewer deploys, particularly when the mini
player appears/disappears and after rotating the phone.

Before/after captures are saved under
`/home/josh/deliverables/ytplayer-done9/`. No push or deployment was performed.