src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -46,7 +46,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <div class="tab-bar-nav" aria-label="Primary navigation">
           <button class="tab active" data-tab="main">
             <svg class="tab-icon" aria-hidden="true"><use href="#icon-home"/></svg>
-            <span class="tab-label">Main</span>
+            <span class="tab-label">Radio</span>
           </button>
           <button class="tab" data-tab="bookmarks">
             <svg class="tab-icon" aria-hidden="true"><use href="#icon-bookmark"/></svg>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -1552,6 +1552,12 @@ small { color: var(--text-muted); }
   background: color-mix(in srgb, var(--border-light) 70%, transparent);
 }
 .tab-bar-nav .tab { flex: 0 0 auto; }
+/* Icons before scrolling: every tab already carries one, and four icons plus
+ * More always fit, so the strip never has to hide a destination. */
+@media (max-width: 1180px) and (min-width: 701px) {
+  .tab-bar-nav .tab .tab-label { display: none; }
+  .tab-bar-nav .tab { padding: 0.5rem 0.6rem; }
+}
 .tab {
   background: transparent;
   border: none;
@@ -3082,9 +3088,22 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   body[data-operator-layout="broadcast"] .controls-row { grid-template-columns: 1fr auto; }
   body[data-operator-layout="broadcast"] #wfm-controls-col { grid-column: 1 / -1; }
 }
-.mobile-more-btn, .mobile-more-menu, .decoder-tab-select { display: none; }
+/* One navigation model at every width.  Statistics, Recorder, Settings and
+ * About are occasional destinations: they live behind More rather than
+ * competing with the operating tabs for the row and then scrolling out of
+ * reach.  The mobile layout already grouped them this way; the desktop strip
+ * now matches it, which is why the tab strip no longer needs to scroll. */
+.tab-bar-nav .tab[data-tab="statistics"],
+.tab-bar-nav .tab[data-tab="recorder"],
+.tab-bar-nav .tab[data-tab="settings"],
+.tab-bar-nav .tab[data-tab="about"] { display: none; }
+.mobile-more-btn { display: flex; flex: 0 0 auto; }
+.mobile-more-menu, .decoder-tab-select { display: none; }
+.tab-bar-nav { position: relative; }
 .mobile-more-menu {
-  position: fixed;
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  right: 0;
   right: max(0.75rem, env(safe-area-inset-right));
   bottom: calc(5.4rem + env(safe-area-inset-bottom));
   z-index: 80;
@@ -3281,6 +3300,12 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   .tab[data-tab="statistics"], .tab[data-tab="recorder"],
   .tab[data-tab="settings"], .tab[data-tab="about"] { display: none; }
   .mobile-more-btn { display: flex; }
+  .mobile-more-menu {
+    position: fixed;
+    top: auto;
+    right: max(0.75rem, env(safe-area-inset-right));
+    bottom: calc(5.4rem + env(safe-area-inset-bottom));
+  }
   .mobile-more-btn[aria-expanded="true"] {
     color: var(--accent-text);
     background: color-mix(in srgb, var(--accent-green) 10%, transparent);

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs

@@ -184,7 +184,10 @@ try {
   await page.locator('.tab[data-tab="main"]').click();
   assert.equal(new URL(page.url()).pathname, "/");
 
-  await page.locator('.tab[data-tab="about"]').click();
+  // About is an occasional destination, so it lives behind More at every
+  // width rather than in the operating tab strip.
+  await page.locator("#mobile-more-btn").click();
+  await page.locator('[data-navigate-tab="about"]').click();
   await page.locator("#tab-about").waitFor({ state: "visible" });
   assert.equal(new URL(page.url()).pathname, "/about");