fix portrait PWA nav dead while playing by making body the scroll container

frontend/app.js

@@ -617,10 +617,13 @@ const Player = {
     return this.mode === 'dual' ? els.audio : this.master;
   },
 
-  async loadVideo(videoObj, { preferStream = false, resume = true } = {}) {
+  async loadVideo(videoObj, { preferStream = false, resume = true, reveal = true } = {}) {
     // When false (auto-advance / prev), skip resuming the saved timestamp and
     // start from the beginning (or the A marker, if an A-B loop is set).
     this._resumeOnLoad = resume;
+    // When false (auto-advance / prev), don't scroll the portrait view back
+    // to the player — the user may be browsing another page while listening.
+    this._revealOnLoad = reveal;
     // Monotonic load token: any await below may resolve after the user has
     // already started a different video — stale loads must stand down
     // instead of hijacking playback (longest window: save-before-playing).
@@ -700,7 +703,7 @@ const Player = {
       btn.textContent = '↻ Retry';
       btn.addEventListener('click', () => {
         btn.remove();
-        Player.loadVideo(videoObj, { preferStream, resume });
+        Player.loadVideo(videoObj, { preferStream, resume, reveal });
       });
       els.playerPane.appendChild(btn);
     }
@@ -733,8 +736,9 @@ const Player = {
       navigator.mediaSession.setActionHandler('seekforward', (d) => Player.seek(Player.master.currentTime + (d.seekOffset || 10)));
     }
     // In portrait PWA mode, scroll the player into view so it's immediately
-    // visible without the user having to swipe up manually.
+    // visible without the user having to swipe up manually — but only for
-    scrollPlayerIntoViewPortrait();
+    // user-picked tracks; auto-advance must not hijack the scroll position.
+    if (this._revealOnLoad) scrollPlayerIntoViewPortrait();
     // Restore A-B markers and load related (non-blocking)
     restoreAbMarkers();
     loadRelated();
@@ -789,7 +793,7 @@ const Player = {
       current.localUrl = null;
       toast('Cached copy unavailable — streaming instead…');
       // Preserve the resume intent of the load that just failed.
-      this.loadVideo(meta, { preferStream: true, resume: this._resumeOnLoad });
+      this.loadVideo(meta, { preferStream: true, resume: this._resumeOnLoad, reveal: this._revealOnLoad });
       return;
     }
     // Advance to the next candidate stream; give up with a clear message at the end.
@@ -1388,8 +1392,9 @@ function advanceQueue() {
     return false;
   }
   // Advancing to a new track always starts from the beginning (or its A point),
-  // never the previous resume timestamp.
+  // never the previous resume timestamp — and never scrolls the user away
-  Player.loadVideo(queue[queueIndex], { resume: false });
+  // from whatever page they are browsing while listening.
+  Player.loadVideo(queue[queueIndex], { resume: false, reveal: false });
   renderUpNext();
   return true;
 }
@@ -1422,7 +1427,7 @@ function playPrev() {
   if (Player.master.currentTime > 3) { Player.seek(0); return; }
   if (queueIndex > 0) {
     queueIndex--;
-    Player.loadVideo(queue[queueIndex], { resume: false });
+    Player.loadVideo(queue[queueIndex], { resume: false, reveal: false });
     renderUpNext();
   }
 }
@@ -2341,6 +2346,7 @@ function markPlayingCard() {
   });
 }
 
+let _lastViewKey = null;
 function render() {
   listFilter = '';
   const fi = $('listFilterInput');
@@ -2351,6 +2357,12 @@ function render() {
   renderSidebar();
   renderSmartSidebar();
   renderList();
+  // Portrait PWA: reveal the freshly selected view. Only on actual view
+  // changes — same-view re-renders (deletes, modal confirms, profile load)
+  // must not hijack the scroll position. Skipped on the very first render.
+  const viewKey = [view.type, view.id, view.smartType].join('|');
+  if (_lastViewKey !== null && viewKey !== _lastViewKey) scrollListIntoViewPortrait();
+  _lastViewKey = viewKey;
 }
 
 // ============================================================================
@@ -2615,16 +2627,30 @@ function applyPortraitPwaClass() {
   }
 }
 
-// Scroll the list-pane to the top so the player content is at the start of the
+// In portrait mode, .body is the single scroll container (player pane on top,
-// list area. In portrait mode, .list-pane is the scroll container (not .body).
+// list pane below). Scrolling it to 0 brings the player fully into view.
 function scrollPlayerIntoViewPortrait() {
   if (!isPortraitPWA()) return;
-  const listPane = document.querySelector('.list-pane');
+  const body = document.querySelector('.body');
-  if (listPane) {
+  if (body) {
-    listPane.scrollTo({ top: 0, behavior: 'smooth' });
+    body.scrollTo({ top: 0, behavior: 'smooth' });
   }
 }
 
+// Bring the list pane to the top of the portrait scroll container so a newly
+// rendered view is actually on-screen. While a track is playing, the player
+// pane above it is taller than the whole viewport — without this scroll the
+// fresh view sits invisibly below the fold and every nav tap looks dead
+// (the mobile "can't navigate while playing" bug).
+function scrollListIntoViewPortrait() {
+  if (!isPortraitPWA()) return;
+  const body = document.querySelector('.body');
+  const listPane = document.querySelector('.list-pane');
+  if (!body || !listPane) return;
+  const top = body.scrollTop + listPane.getBoundingClientRect().top - body.getBoundingClientRect().top;
+  body.scrollTo({ top, behavior: 'smooth' });
+}
+
 function setupPortraitPwaWatcher() {
   applyPortraitPwaClass();
   _portraitPwaMQ.addEventListener('change', () => {
@@ -2725,6 +2751,9 @@ function wireUI() {
     view = { type: 'search' };
     render();
     showSearchSkeletons();
+    // Even when already on the search view (no view change for render() to
+    // detect), a new query means the user wants to see the results.
+    scrollListIntoViewPortrait();
     try {
       const res = await API.search(q);
       if (!res || !res.ok) throw new Error(res?.error || 'Search failed');
@@ -3030,7 +3059,7 @@ document.querySelectorAll('.chip').forEach((c) => {
   $('miniBar').addEventListener('click', () => {
     hideMiniBar();
     // Scroll the player into view if needed. In portrait PWA, scroll only the
-    // list-pane (the designated scroll container) — scrollIntoView() also
+    // .body pane (the designated scroll container) — scrollIntoView() also
     // scrolls overflow:hidden ancestors up to <html> on iOS, leaving the
     // document offset and fixed-element hit testing broken.
     if (isPortraitPWA()) scrollPlayerIntoViewPortrait();

frontend/styles.css

@@ -1765,14 +1765,17 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
     z-index: 50;
   }
 
-  /* --- Body: vertical stack (player above list) -------------------------- */
+  /* --- Body: vertical stack (player above list), THE scroll container ---- */
   .body {
     flex-direction: column;
-    overflow: hidden;
+    overflow-y: auto;
-    /* Body itself does NOT scroll — player-pane is fixed height,
+    overflow-x: hidden;
-       list-pane takes remaining space and scrolls independently.
+    overscroll-behavior: contain;
-       This keeps the player always visible and gives the list/settings
+    /* The body is the single scroll container in portrait. A playing player
-       the full remaining viewport to scroll in. */
+       pane (stage + control deck + meta + up-next + related) is taller than
+       the whole viewport, so it must be able to scroll out of the way — with
+       overflow:hidden here the list-pane sat unreachable below the fold and
+       every sidebar/bottom-nav tap looked dead while a track was playing. */
   }
 
   /* --- Player pane: full width, compact vertical padding ----------------- */
@@ -1808,14 +1811,16 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
     gap: 6px;
   }
 
-  /* --- List pane: full width below player, fills remaining height, scrolls independently --- */
+  /* --- List pane: full width below player, flows in the body scroll ------ */
   .list-pane {
-    flex: 1;
+    flex: none;
-    min-height: 0; /* required for flex children to shrink below content size */
+    /* At least one full body-height so navigating always yields a full-screen
+       page; longer content just grows the body scroll. */
+    min-height: 100%;
     width: 100%;
     border-left: none;
     border-top: 1px solid var(--line-soft);
-    overflow-y: auto;
+    overflow-y: visible;
     overflow-x: hidden;
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);

tests/portrait-pwa.spec.js

@@ -29,6 +29,7 @@ async function enablePortraitPwaMode(page) {
     content: `
       /* Mirror (display-mode:standalone) and (orientation:portrait) rules for testing */
       [data-portrait-pwa-test] .app { grid-template-columns: 1fr; }
+      [data-portrait-pwa-test] .bottom-nav { display: flex; }
       [data-portrait-pwa-test] .sidebar-toggle { display: inline-flex; }
       [data-portrait-pwa-test] .sidebar {
         position: fixed; top:0; left:0; bottom:0;
@@ -39,16 +40,20 @@ async function enablePortraitPwaMode(page) {
       [data-portrait-pwa-test] .app.sidebar-open .sidebar { transform:translateX(0); }
       [data-portrait-pwa-test] .app.sidebar-open .sidebar-backdrop { display:block; opacity:1; }
       [data-portrait-pwa-test] .topbar { position:sticky; top:0; z-index:50; }
-      [data-portrait-pwa-test] .body { flex-direction:column; overflow:hidden; }
+      [data-portrait-pwa-test] .body {
+        flex-direction:column;
+        overflow-y:auto; overflow-x:hidden;
+        overscroll-behavior:contain;
+      }
       [data-portrait-pwa-test] .player-pane { flex:none; width:100%; overflow-y:visible; }
       [data-portrait-pwa-test] .player-stage { width:100%; aspect-ratio:16/9; }
       [data-portrait-pwa-test] .btn-row { flex-wrap:wrap; gap:7px; }
       [data-portrait-pwa-test] .now-meta { flex-direction:column; gap:12px; margin-top:14px; }
       [data-portrait-pwa-test] .np-actions { flex-wrap:wrap; gap:6px; }
       [data-portrait-pwa-test] .list-pane {
-        flex:1; min-height:0; width:100%;
+        flex:none; min-height:100%; width:100%;
         border-left:none; border-top:1px solid var(--line-soft);
-        overflow-y:auto; overflow-x:hidden;
+        overflow-y:visible; overflow-x:hidden;
         padding-bottom: 60px;
       }
       [data-portrait-pwa-test] .cards { max-height:none; overflow-y:visible; padding-bottom:0; }
@@ -63,9 +68,33 @@ async function enablePortraitPwaMode(page) {
   });
 }
 
+/**
+ * Playwright cannot set display-mode:standalone, so isPortraitPWA() in app.js
+ * would return false and the JS scroll behaviors (scrollListIntoViewPortrait,
+ * scrollPlayerIntoViewPortrait) would no-op. Stub matchMedia for that one
+ * query BEFORE app.js loads so the JS layer behaves as in the installed PWA.
+ */
+async function stubStandalonePortraitMediaQuery(page) {
+  await page.addInitScript(() => {
+    const orig = window.matchMedia.bind(window);
+    window.matchMedia = (q) => {
+      if (q.includes('display-mode: standalone') && q.includes('portrait')) {
+        return {
+          matches: true, media: q, onchange: null,
+          addEventListener: () => {}, removeEventListener: () => {},
+          addListener: () => {}, removeListener: () => {},
+          dispatchEvent: () => false,
+        };
+      }
+      return orig(q);
+    };
+  });
+}
+
 test.describe('Portrait PWA layout', () => {
   test.beforeEach(async ({ page }) => {
     await page.setViewportSize({ width: PORTRAIT_WIDTH, height: PORTRAIT_HEIGHT });
+    await stubStandalonePortraitMediaQuery(page);
     await page.goto('/');
     // Wait for app JS to initialise
     await page.waitForSelector('.app', { state: 'attached' });
@@ -119,6 +148,53 @@ test.describe('Portrait PWA layout', () => {
     await expect(lastGroup).toBeVisible();
   });
 
+  test('navigation works while a track is playing (player pane taller than viewport)', async ({ page }) => {
+    // Simulate the DOM state afterLoad() creates for a playing track: player
+    // pane populated with controls, meta, up-next and related — together
+    // taller than the viewport. This used to leave the list-pane below the
+    // fold with .body overflow:hidden, so every nav tap looked dead.
+    await page.evaluate(() => {
+      document.getElementById('playerPane').classList.remove('empty');
+      document.getElementById('playerPlaceholder').classList.add('hidden');
+      document.getElementById('controls').classList.remove('hidden');
+      document.getElementById('nowPlayingMeta').classList.remove('hidden');
+      document.getElementById('npTitle').textContent = 'Test track';
+      document.getElementById('upnext').classList.remove('hidden');
+      document.getElementById('upnextList').innerHTML =
+        '<div class="upnext-item">queued</div>'.repeat(4);
+      document.getElementById('relatedPanel').classList.remove('hidden');
+      document.getElementById('relatedList').innerHTML =
+        '<div class="related-item">related</div>'.repeat(6);
+      document.getElementById('miniBar').classList.remove('hidden');
+    });
+
+    // Sanity: the populated player pane really is taller than the viewport.
+    const paneHeight = await page.evaluate(
+      () => document.getElementById('playerPane').getBoundingClientRect().height
+    );
+    expect(paneHeight).toBeGreaterThan(PORTRAIT_HEIGHT);
+
+    // Navigate via the bottom nav.
+    await page.click('.bottom-nav-btn[data-view="history"]');
+    await page.waitForTimeout(700); // smooth scroll settle
+
+    // The view switched AND its pane is actually on-screen.
+    await expect(page.locator('#listTitle')).toHaveText('History');
+    const box = await page.locator('.list-pane').boundingBox();
+    expect(box).not.toBeNull();
+    expect(box.y).toBeLessThan(PORTRAIT_HEIGHT / 2); // top of the page is visible
+    expect(box.y + box.height).toBeGreaterThan(200);  // and it has visible extent
+
+    // Sidebar navigation must work the same way.
+    await page.click('#sidebarToggle');
+    await page.waitForTimeout(350);
+    await page.click('.nav-item[data-view="saved"]');
+    await page.waitForTimeout(700);
+    await expect(page.locator('#listTitle')).toHaveText('Saved videos');
+    const box2 = await page.locator('.list-pane').boundingBox();
+    expect(box2.y).toBeLessThan(PORTRAIT_HEIGHT / 2);
+  });
+
   test('switching landscape to portrait restores layout', async ({ page }) => {
     // Start in landscape
     await page.setViewportSize({ width: LANDSCAPE_WIDTH, height: LANDSCAPE_HEIGHT });