[test](trx-frontend-http): assert header geometry in the browser smoke test

Several layout faults shipped while every gate passed, because nothing
looked at geometry: a header whose height tracked the viewport, controls
at four different heights, a tab strip that ran under the controls, and a
dropdown that opened underneath the page.

Assert the invariants behind those at four widths — the header stays one
row, the tabs do not reach the controls, the controls share a height, the
page does not scroll sideways — and that the menu renders with real
dimensions and wins a hit test at its own centre.

The overlap check measures the tabs rather than the strip: with the strip
allowed to overflow, its box shrinks while its content paints across the
controls, so the container's own rect never registers the collision.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz
Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js

@@ -843,7 +843,8 @@ function elementById(id) {
     more.id = "mobile-more-btn";
     more.className = "tab mobile-more-btn";
     more.type = "button";
-    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
+    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
+    more.setAttribute("aria-label", "Tools and settings");
     more.setAttribute("aria-haspopup", "menu");
     more.setAttribute("aria-expanded", "false");
     const menu = document.createElement("div");

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

@@ -1051,6 +1051,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </template>
     </div>
     <div id="tab-statistics" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">Statistics</h2>
       <template id="tmpl-statistics">
       <div class="stats-controls">
         <div class="stats-control-group">
@@ -1191,6 +1192,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </section>
     </div>
     <div id="tab-settings" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">Settings</h2>
       <div class="sub-tab-bar">
         <button class="sub-tab active" data-subtab="settings-scheduler">Scheduler</button>
         <button class="sub-tab" data-subtab="settings-background-decode">Background Decode</button>
@@ -1486,6 +1488,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </div>
     </div>
     <div id="tab-about" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">About</h2>
       <div id="auth-badge" style="display:none; margin-bottom: 1rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 0.25rem; color: var(--text-muted); font-size: 0.85rem;">Authenticated as: <strong id="auth-role-badge">--</strong></div>
       <template id="tmpl-about">
       <div class="sub-tab-bar">

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

@@ -1531,16 +1531,18 @@ small { color: var(--text-muted); }
   align-items: center;
   gap: 0.2rem;
   min-width: 0;
-  /* Never wraps and never scrolls: the occasional destinations live behind
+  /* Never wraps.  It must still be able to shrink below its content, or it
-   * More, so four tabs plus More always fit.  overflow-x here would clip the
+   * overlaps the controls; the menus it anchors are reparented to the body on
-   * dropdown this element anchors. */
+   * open, so clipping here no longer reaches them. */
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 .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) {
+@media (max-width: 1360px) and (min-width: 701px) {
   .tab-bar-nav .tab .tab-label { display: none; }
+  .tab-bar-nav .tab .tab-icon, .tab-bar-nav .tab .tab-more-icon { display: block; }
   .tab-bar-nav .tab { padding: 0.5rem 0.6rem; }
 }
 .tab {
@@ -1564,6 +1566,7 @@ small { color: var(--text-muted); }
   flex-shrink: 0;
 }
 .tab-label { display: block; }
+.tab-more-icon { display: none; }
 .about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
 .about-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0; overflow: hidden; }
 .about-card-title { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 50%, var(--bg)); }
@@ -3277,7 +3280,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
     color: var(--text);
     box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
   }
-  .tab-icon { display: block; }
+  .tab-icon, .tab-more-icon { display: block; }
   /* Shorten long tab labels to keep bottom nav compact */
   .tab[data-tab="bookmarks"] .tab-label { font-size: 0.6rem; }
   .tab[data-tab="digital-modes"] .tab-label  { font-size: 0.6rem; }
@@ -5185,7 +5188,6 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 1rem;
 }
 .stats-controls {
   display: flex;
@@ -5442,3 +5444,20 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
 .top-bar-more-menu.is-open { display: flex; }
 .top-bar-more-menu > * { width: 100%; }
 .top-bar-more-menu select { width: 100%; max-width: none; }
+
+
+/* Page title for destinations reached through the Tools menu.  The tab strip
+ * cannot show which of them is active, so each states its own name.
+ *
+ * The margin is the spacing on the plain block panels; #tab-statistics is a
+ * flex column with its own `gap`, where the margin lands on top of that gap
+ * and doubles the space under the title. */
+.section-heading {
+  margin: 0 0 var(--space-3);
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text);
+}
+
+#tab-statistics > .section-heading { margin-bottom: 0; }

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts

@@ -448,7 +448,8 @@ function elementById<T extends HTMLElement>(id: string): T {
     more.id = "mobile-more-btn";
     more.className = "tab mobile-more-btn";
     more.type = "button";
-    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
+    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
+    more.setAttribute("aria-label", "Tools and settings");
     more.setAttribute("aria-haspopup", "menu");
     more.setAttribute("aria-expanded", "false");
     const menu = document.createElement("div");

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

@@ -9,6 +9,9 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { chromium } from "playwright-core";
 
+// page.evaluate callbacks run in the browser, not in this Node process.
+/* global document */
+
 const frontendDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 const webDir = path.resolve(frontendDir, "../assets/web");
 const generatedDir = path.join(webDir, "generated");
@@ -195,6 +198,55 @@ try {
   await page.locator("#tab-main").waitFor({ state: "visible" });
   assert.equal(new URL(page.url()).pathname, "/");
   assert.deepEqual(runtimeErrors, []);
+
+  // --- Layout regressions -------------------------------------------------
+  // Every fault below shipped at some point while the rest of this file
+  // passed, because nothing here looked at geometry: a header whose height
+  // tracked the viewport, controls that stretched, a tab strip that ran under
+  // the controls, and a dropdown that opened underneath the spectrum.
+  for (const width of [1440, 1280, 1100, 900]) {
+    await page.setViewportSize({ width, height: 900 });
+    await page.waitForTimeout(250);
+    const header = await page.evaluate(() => {
+      const bar = document.querySelector(".tab-bar");
+      const nav = document.querySelector(".tab-bar-nav");
+      const actions = document.querySelector(".top-bar-actions");
+      const controls = [...actions.children]
+        .filter((el) => !el.hidden && el.getBoundingClientRect().height > 0)
+        .map((el) => Math.round(el.getBoundingClientRect().height));
+      return {
+        barHeight: Math.round(bar.getBoundingClientRect().height),
+        // The tabs, not the strip: with the strip allowed to overflow its box
+        // shrinks while its content paints across the controls, so the
+        // container's own rect never registers the collision.
+        overlap: Math.round(Math.max(...[...nav.querySelectorAll(".tab")]
+          .filter((tab) => tab.offsetParent !== null)
+          .map((tab) => tab.getBoundingClientRect().right))
+          - actions.getBoundingClientRect().left),
+        heights: [...new Set(controls)],
+        pageScrollsSideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
+      };
+    });
+    assert.ok(header.barHeight <= 96, `header is ${header.barHeight}px at ${width}px; it should stay one row`);
+    assert.ok(header.overlap <= 0, `tab strip overlaps the controls by ${header.overlap}px at ${width}px`);
+    assert.ok(header.heights.length <= 2, `controls have heights ${header.heights.join(", ")} at ${width}px`);
+    assert.equal(header.pageScrollsSideways, false, `page scrolls sideways at ${width}px`);
+  }
+
+  // A dropdown must paint over the page, not inside the header: fixed
+  // positioning escapes clipping but not the header's stacking context.
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await page.waitForTimeout(250);
+  const menu = await page.evaluate(() => {
+    document.getElementById("mobile-more-btn").click();
+    const element = document.getElementById("mobile-more-menu");
+    const rect = element.getBoundingClientRect();
+    const hit = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    return { width: Math.round(rect.width), height: Math.round(rect.height), onTop: element.contains(hit) };
+  });
+  assert.ok(menu.height > 40 && menu.width > 80, `menu rendered ${menu.width}x${menu.height}`);
+  assert.ok(menu.onTop, "menu is painted underneath the page");
+
 } finally {
   await browser.close();
   await new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));

src/trx-client/trx-frontend/trx-frontend-http/src/api/assets.rs

@@ -95,6 +95,18 @@ pub(crate) async fn about_index(req: HttpRequest) -> impl Responder {
     static_asset_response(&req, "text/html; charset=utf-8", c)
 }
 
+#[get("/statistics")]
+pub(crate) async fn statistics_index(req: HttpRequest) -> impl Responder {
+    let c = gz_index_html();
+    static_asset_response(&req, "text/html; charset=utf-8", c)
+}
+
+#[get("/bookmarks")]
+pub(crate) async fn bookmarks_index(req: HttpRequest) -> impl Responder {
+    let c = gz_index_html();
+    static_asset_response(&req, "text/html; charset=utf-8", c)
+}
+
 // ---------------------------------------------------------------------------
 // Favicon & logo
 // ---------------------------------------------------------------------------

src/trx-client/trx-frontend/trx-frontend-http/src/api/mod.rs

@@ -637,6 +637,8 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
         .service(assets::recorder_index)
         .service(assets::settings_index)
         .service(assets::about_index)
+        .service(assets::statistics_index)
+        .service(assets::bookmarks_index)
         .service(assets::favicon)
         .service(assets::favicon_png)
         .service(assets::logo)