[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/style.css

@@ -1531,15 +1531,16 @@ small { color: var(--text-muted); }
   align-items: center;
   gap: 0.2rem;
   min-width: 0;
-  /* Never wraps and never scrolls: the occasional destinations live behind
-   * More, so four tabs plus More always fit.  overflow-x here would clip the
-   * dropdown this element anchors. */
+  /* Never wraps.  It must still be able to shrink below its content, or it
+   * overlaps the controls; the menus it anchors are reparented to the body on
+   * 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; }
@@ -5187,7 +5188,6 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 1rem;
 }
 .stats-controls {
   display: flex;
@@ -5447,7 +5447,11 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
 
 
 /* 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. */
+ * 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;
@@ -5455,3 +5459,5 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   line-height: 1.2;
   color: var(--text);
 }
+
+#tab-statistics > .section-heading { margin-bottom: 0; }

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)