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.
-    scrollPlayerIntoViewPortrait();
+    // visible without the user having to swipe up manually — but only for
+    // 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.
-  Player.loadVideo(queue[queueIndex], { resume: false });
+  // never the previous resume timestamp — and never scrolls the user away
+  // 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
-// list area. In portrait mode, .list-pane is the scroll container (not .body).
+// In portrait mode, .body is the single scroll container (player pane on top,
+// list pane below). Scrolling it to 0 brings the player fully into view.
 function scrollPlayerIntoViewPortrait() {
   if (!isPortraitPWA()) return;
-  const listPane = document.querySelector('.list-pane');
-  if (listPane) {
-    listPane.scrollTo({ top: 0, behavior: 'smooth' });
+  const body = document.querySelector('.body');
+  if (body) {
+    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();