fix(hub): the transfers panel hung off the side of a phone

Reported: on mobile you see only the right-hand edge of the panel, without the content. Measured, before anything was changed: 320 px viewport -> panel at -138..192, 138 px off the left 360 px -> -98..232 412 px -> -46..284 The panel is 330 px wide and anchored to the right edge of its button — but that button is not at the right edge of the screen, since the bell and the user menu come after it. What falls off is the left-hand side, which is where the file names are, so what stayed on screen was a strip of progress bars belonging to nothing. Narrowing it would not have helped: the overflow comes from where the right edge is pinned, not from the width. Below the existing 768 px breakpoint the panel is anchored to the viewport instead, full width on a phone and capped at 420 px on a tablet, where stretching two filenames across 750 px would be silly. Desktop keeps its 330 px against the button. The interesting part is how it was found. The responsive tests read numbers out of the stylesheet and said, in their own docstring, that a layout could not be measured because the suite had no browser. It has one now — Chrome, from the video work — so layout_probe.py renders the real stylesheet at a given width and returns rectangles. `width: 330px` was never the thing worth asserting on. An iframe carries the viewport, because a headless window will not go below about 500 px, and one browser measures every width: launching one per test put three minutes on the suite against twenty-six seconds for all of them. Checked that the new tests fail with the rule removed — three of them do — and that they pass with it back.
author: Christophe Besson <cbesson@gmail.com> 2026-08-17 09:28:49 +0200
committer: Christophe Besson <cbesson@gmail.com> 2026-08-17 09:28:49 +0200
commit: af30a10b83366416c25eaacec0b4df77526d0924 (patch)
tree: 1395bf4d9000b262cebbf7d66fcb6c9bf22975eb /packages/meshbay-hub/tests/harness/layout_probe.py
parent: 42047dac4041e72e09499e3adf145f1c0f83b284 (diff)
download: meshbay-af30a10b83366416c25eaacec0b4df77526d0924.tar.gz
1 files changed, 140 insertions, 0 deletions
diff --git a/packages/meshbay-hub/tests/harness/layout_probe.py b/packages/meshbay-hub/tests/harness/layout_probe.py
new file mode 100644
index 0000000..530b3f0
--- /dev/null
+++ b/packages/meshbay-hub/tests/harness/layout_probe.py
@@ -0,0 +1,140 @@
+#!/usr/bin/env python3
+"""
+Measure a piece of the SPA at a phone width, in a real browser.
+
+The responsive tests up to now pinned numbers out of the stylesheet, with a
+docstring admitting that a layout cannot be measured because there is no
+browser in the suite. There is one: Chrome is what the video work has been
+verified against. Reading `width: 330px` out of a rule says nothing about
+whether the thing lands on the screen — that depends on where its anchor sits,
+which depends on everything to its right.
+
+Renders the real style.css with a fragment of markup, at a given viewport, and
+reports the bounding box of each selector asked for.
+
+    layout_probe.py <widths,comma,separated> <html-fragment-file> <selector> [...]
+
+One browser for all the widths asked for: an iframe apiece, measured in a
+single pass. Launching Chrome per width put three minutes on the test suite.
+"""
+import http.server
+import json
+import socketserver
+import subprocess
+import sys
+import tempfile
+import threading
+import time
+from pathlib import Path
+
+STATIC = Path(__file__).resolve().parents[2] / "src" / "meshbay_hub" / "static"
+PORT = 8734
+
+PAGE = """<!doctype html><html><head><meta charset=utf-8></head>
+<body style="margin:0">
+<!-- One iframe per width. A headless window will not go below about 500 px,
+     and an iframe establishes its own viewport, so media queries inside it see
+     the phone width we mean. -->
+<div id="frames"></div>
+<script>
+const WIDTHS = %(widths)s, SELECTORS = %(selectors)s;
+const FRAG = %(fragment)s;
+const host = document.getElementById('frames');
+for (const w of WIDTHS) {
+  const f = document.createElement('iframe');
+  f.id = 'f' + w;
+  f.style.cssText = `width:${w}px;height:740px;border:0;display:block`;
+  host.appendChild(f);
+  const d = f.contentDocument;
+  d.open();
+  d.write(`<!doctype html><html><head><meta charset=utf-8>
+<link rel="stylesheet" href="/style.css"></head><body>${FRAG}</body></html>`);
+  d.close();
+}
+setTimeout(() => {
+  const out = {};
+  for (const w of WIDTHS) {
+    const win = document.getElementById('f' + w).contentWindow;
+    const r = {viewport: {w: win.innerWidth, h: win.innerHeight},
+               docScrollW: win.document.documentElement.scrollWidth, boxes: {}};
+    for (const sel of SELECTORS) {
+      const el = win.document.querySelector(sel);
+      if (!el) { r.boxes[sel] = null; continue; }
+      const b = el.getBoundingClientRect();
+      r.boxes[sel] = {
+        left: Math.round(b.left), right: Math.round(b.right),
+        top: Math.round(b.top), width: Math.round(b.width),
+        height: Math.round(b.height),
+        offLeft: Math.round(Math.max(0, -b.left)),
+        offRight: Math.round(Math.max(0, b.right - win.innerWidth)),
+      };
+    }
+    out[w] = r;
+  }
+  fetch('/log', {method: 'POST', body: JSON.stringify(out)});
+}, 500);
+</script></body></html>"""
+
+RECORDS = []
+
+
+def main() -> int:
+    widths = [int(w) for w in sys.argv[1].split(",")]
+    fragment = Path(sys.argv[2]).read_text()
+    selectors = sys.argv[3:]
+
+    class H(http.server.BaseHTTPRequestHandler):
+        def log_message(self, *a):
+            pass
+
+        def do_POST(self):
+            RECORDS.append(json.loads(
+                self.rfile.read(int(self.headers["Content-Length"])).decode()))
+            self.send_response(204)
+            self.end_headers()
+
+        def do_GET(self):
+            if self.path == "/":
+                body = (PAGE % {"fragment": json.dumps(fragment),
+                                "widths": json.dumps(widths),
+                                "selectors": json.dumps(selectors)}).encode()
+                ctype = "text/html; charset=utf-8"
+            elif self.path == "/style.css":
+                body = (STATIC / "style.css").read_bytes()
+                ctype = "text/css"
+            else:
+                self.send_response(404)
+                self.end_headers()
+                return
+            self.send_response(200)
+            self.send_header("Content-Type", ctype)
+            self.send_header("Content-Length", str(len(body)))
+            self.end_headers()
+            self.wfile.write(body)
+
+    class S(socketserver.ThreadingTCPServer):
+        allow_reuse_address = True
+        daemon_threads = True
+
+    srv = S(("127.0.0.1", PORT), H)
+    threading.Thread(target=srv.serve_forever, daemon=True).start()
+    chrome = subprocess.Popen([
+        "google-chrome", "--headless=new", "--no-sandbox",
+        "--window-size=1000,900",
+        "--user-data-dir=" + tempfile.mkdtemp(prefix="chrome-layout-"),
+        f"http://127.0.0.1:{PORT}/",
+    ], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+    deadline = time.time() + 45
+    while time.time() < deadline and not RECORDS:
+        time.sleep(0.2)
+    chrome.terminate()
+    srv.shutdown()
+    if not RECORDS:
+        print(json.dumps({"error": "no measurement"}))
+        return 1
+    print(json.dumps(RECORDS[0]))
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
author	Christophe Besson <cbesson@gmail.com>	2026-08-17 09:28:49 +0200
committer	Christophe Besson <cbesson@gmail.com>	2026-08-17 09:28:49 +0200
commit	af30a10b83366416c25eaacec0b4df77526d0924 (patch)
tree	1395bf4d9000b262cebbf7d66fcb6c9bf22975eb /packages/meshbay-hub/tests/harness/layout_probe.py
parent	42047dac4041e72e09499e3adf145f1c0f83b284 (diff)
download	meshbay-af30a10b83366416c25eaacec0b4df77526d0924.tar.gz