fix(queue): draw the scrim only where it can be tapped

Below 600px `.panel-content` is `width: 100%`, so the scrim sat
entirely underneath an opaque panel -- measured at 424x439, host,
panel and scrim all 424x318. It dimmed nothing and dismissed nothing
there while wearing `cursor: pointer`, so #24's tap-outside-to-close
did not exist on the device it was drawn for.

Of the issue's two directions this takes the second. A gutter is the
drawer pattern and buys the affordance by taking width off a
full-screen surface on a 424px viewport; #55 already made the queue a
*screen* at that width, whose ways out are back and a 44px close
button. So there is no scrim there rather than an unreachable one.

Existence is `matchMedia` rather than `display: none`, on `job-band`'s
rule: a hidden scrim is still an element carrying the handler. The
600-899 band, where the panel is a 320px column of a wider content
area and the scrim has real uncovered pixels, is untouched.

The e2e half asserts *absence* at 424x439 rather than clicking,
because a phone-width case that clicks the scrim's centre hits the
panel and passes on the broken build -- which the issue anticipates.

Closes #171

CLAUDE.md

@@ -2006,9 +2006,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
@@ -2489,31 +2506,6 @@ 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

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

@@ -1,209 +0,0 @@
-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/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/src/components/explore-album-details/explore-album-details.ts

@@ -892,67 +892,6 @@ 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;
-                }
-            }
         `,
     ];
 

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

@@ -13,6 +13,7 @@ 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,
@@ -120,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;
 
@@ -391,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;
@@ -414,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
@@ -828,6 +850,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(),
@@ -870,6 +898,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',
@@ -936,6 +966,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.
@@ -1972,7 +2006,7 @@ export class QueuePanel
         const tracks = this.queue.tracks;
 
         return html`
-            ${this.overlay
+            ${this.overlay && !this.phone
                 ? html`<div
                       class="scrim"
                       part="scrim"

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

@@ -29,8 +29,38 @@ 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.
+ */
+function stubPhone(phone: boolean): void {
+  const real = window.matchMedia.bind(window);
+
+  window.matchMedia = ((q: string) =>
+    q.includes('max-width: 599px')
+      ? {
+          matches: phone,
+          media: q,
+          addEventListener() {},
+          removeEventListener() {},
+        }
+      : real(q)) as typeof window.matchMedia;
+
+  restoreMedia = () => {
+    window.matchMedia = real;
+  };
+}
+
 afterEach(() => {
   for (const w of wrappers.splice(0)) w.remove();
+  restoreMedia?.();
+  restoreMedia = null;
 });
 
 /**
@@ -157,6 +187,52 @@ 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);
+  });
+
   /**
    * 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