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.

1 files changed, 14 insertions, 0 deletions

diff --git a/CLAUDE.md b/CLAUDE.md
index babbd86..8e2eafa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -302,6 +302,19 @@ keypair bundle, or anything that looks like a user's public key.
   reproduced the defect in one run. Model the environment, never the code under
   test
 
+- **A stylesheet does not tell you where anything lands.** The responsive tests
+  pinned numbers out of `style.css` and said in their own docstring that a
+  layout could not be measured because there was no browser in the suite. There
+  is one — Chrome, from the video work — and the difference is the transfers
+  panel: `width: 330px` was never the problem, the problem was that it is
+  anchored to a button which is not at the right edge of the screen, so it hung
+  138 px off the left of a 320 px phone and hid the file names. No reading of
+  the rule would have shown that. `tests/harness/layout_probe.py` renders the
+  real stylesheet at a given width (in an iframe — a headless window will not go
+  below ~500 px) and returns rectangles; one browser measures every width,
+  because one apiece put three minutes on the suite. Assert on geometry, and
+  check the test fails with the fix removed
+
 - **A hook cannot depend on one declared below it.** `const a = useCallback(fn,
   [b])` evaluates `[b]` where it is written, so a `b` further down the component
   is still in its temporal dead zone: `ReferenceError` on every render, before
@@ -495,6 +508,7 @@ SFR residential Fedora 44 → meshbay.org OVH VPS:
 | Seeking (browser) | `static/app.js` | `requestSeek` → node restarts ffmpeg with `-ss`; `reinitAt` clears the buffer and sets `timestampOffset`. `-copyts` does *not* preserve position — measured — so the offset comes from the client |
 | Seeking (node) | `webrtc_server.py` | `start` on `stream_req`; `-ss` **before** `-i` (index seek, not decode-and-discard), clamped away from the end, echoed in `stream_init` |
 | Resume position | `static/app.js` | `readResumePosition` / `writeResumePosition` — localStorage, per file, per browser. No protocol, and nothing new learns what you watch |
+| Layout, measured | `tests/harness/layout_probe.py` | Renders `style.css` in Chrome at any width and returns bounding boxes. Use it for layout, not `test_layout_responsive.py`, which only pins CSS values |
 
 ## meshbay.org server (état cible)