Listen and Read: sub-tabs share the Back row, duplicate headings hidden on phones, page tab rows scroll on one line

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/app.js

@@ -256,9 +256,11 @@ const lastSub = g => { let l = null; try { l = JSON.parse(localStorage.getItem(n
 /** The row of buttons under the top bar that switches between the parts of Listen and Read. */
 function drawSubnav(name) {
   const el = $('#subnav'); if (!el) return; const g = leafOf(name), items = g ? MERGED[g][1].filter(allowed) : [];
+  document.body.classList.remove('subtabs');
   if (!g || items.length < 2) { el.hidden = true; el.innerHTML = ''; return; }
   try { localStorage.setItem(nk('nav_last_' + g), JSON.stringify(name)); } catch {}
   el.innerHTML = items.map(id => `<a href="#/${id}" class="${id === name ? 'on' : ''}" ${id === name ? 'aria-current="page"' : ''}>${esc(tabLabel(id))}</a>`).join(''); el.hidden = false;
+  document.body.classList.add('subtabs'); const on = el.querySelector('a.on'); if (on) on.scrollIntoView({ inline: 'center', block: 'nearest' });
 }
 const navIdOf = name => name === 'signal' && sgInChat() ? 'chat' : name === 'edit' ? 'files' : (name === 'tasks' || name === 'calendar') ? 'planner' : leafOf(name) || name;
 let curRoute = '';
@@ -290,6 +292,7 @@ function drawNav() {
     $('#nvb').onclick = () => { if (navIdx > 0) history.back(); else if (parentHash()) location.hash = parentHash(); };
     $('#nvf').onclick = () => history.forward();
   }
+  const sn = $('#subnav'); if (sn && sn.parentNode !== el) el.insertBefore(sn, $('#nvt')); // Listen/Read buttons share the Back/Forward row
   $('#nvb').disabled = !canBack; $('#nvf').disabled = !canFwd;
   const t = TABS.find(x => x[0] === (curRoute || activeTab)); $('#nvt').textContent = t ? t[1] : '';
   el.hidden = false;

public/style.css

@@ -922,10 +922,13 @@ body.mselecting .mrow { user-select: none; -webkit-user-select: none; -webkit-to
 .rdonow { min-height: 40px; } .rdonow small { display: block; color: var(--muted); } .rdonow b { font-size: 17px; }
 
 /* Menu: Listen/Read sub-buttons, the Apps sheet behind More, choosing the bottom bar */
-#subnav { display: flex; gap: 6px; overflow-x: auto; margin: 0; padding: 6px calc(var(--sar) + 12px) 2px calc(var(--sal) + 12px); scrollbar-width: none; flex: none; }
+#subnav { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 0 0 6px; padding: 0 2px; scrollbar-width: none; flex: 1; min-width: 0; }
 #subnav::-webkit-scrollbar { display: none; } #subnav[hidden], body.editing #subnav { display: none; }
 #subnav a { min-height: 36px; padding: 6px 14px; font-size: 14px; }
-@media (min-width: 768px) { #subnav { padding-left: 24px; } }
+#navbar:has(#subnav:not([hidden])) #nvt { display: none; } /* the pills say where you are */
+@media (max-width: 767px) { body.subtabs #view .wrap > h1:first-child, body.subtabs #view .ptop > h1:first-child { display: none; } body.subtabs .ptop { margin-top: 4px; } body.subtabs .ptop .btn { margin-left: 0; flex: 1 1 auto; justify-content: center; } body.subtabs #navbar #nvf { display: none; } #subnav a { padding: 6px 12px; } }
+/* a page's own tab row stays on one line and scrolls sideways instead of wrapping into several rows */
+@media (max-width: 767px) { #view .seg:not([style*="wrap"]):not(.segphone) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px 0; } #view .seg:not([style*="wrap"]) a { min-height: 36px; flex: none; } #view .seg::-webkit-scrollbar { display: none; } }
 #sheet .sheet.launcher { height: 92dvh; max-height: 92dvh; display: flex; flex-direction: column; }
 #sheet .sheet.launcher #lnb { flex: 1; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px; }
 #sheet .sheet.launcher #lnq { width: 100%; margin-top: 4px; }