fix: keep the photo lightbox's close button on a phone screen

The bar was 457 px wide and pushed the close button to 397..437 px, off a
360 px phone. Delete leaves the lightbox (it stays on the tile's menu:
right-click, or press and hold), and below 768 px the bar drops the file
name, the zoom label and 100%.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 51 insertions, 0 deletions

diff --git a/packages/meshbay-hub/tests/test_layout_measured.py b/packages/meshbay-hub/tests/test_layout_measured.py
index 298a754..96f035f 100644
--- a/packages/meshbay-hub/tests/test_layout_measured.py
+++ b/packages/meshbay-hub/tests/test_layout_measured.py
@@ -362,3 +362,54 @@ def test_the_name_leaves_the_trigger_on_mobile_only(full_nav, width):
     assert shown == (width > 768), (
         f"at {width} px the name in the user menu is "
         f"{'shown' if shown else 'hidden'}")
+
+
+# The photo lightbox's bar. With the file name, the zoom label, 100% and a
+# delete button it was 457 px wide, and the close button sat at 397..437 px —
+# off a 360 px phone, with no other way out of the lightbox on screen. The
+# fixture is `Lightbox()`'s bar, cast button and copy-link included.
+_ZOOM_ICON = '<svg class="icon photo-icon-btn-icon" viewBox="0 0 24 24"></svg>'
+LIGHTBOX_BAR = textwrap.dedent(f"""
+    <div class="video-overlay photo-lightbox">
+      <div class="video-top-bar">
+        <span class="video-title">IMG_20150510_205012.JPG</span>
+        <div class="photo-zoom-controls">
+          <button class="photo-icon-btn">{_ZOOM_ICON}</button>
+          <span class="photo-zoom-percent">Ajusté</span>
+          <button class="photo-icon-btn">{_ZOOM_ICON}</button>
+          <button class="photo-icon-btn active">{_ZOOM_ICON}</button>
+          <button class="photo-icon-btn photo-icon-btn-text">100%</button>
+        </div>
+        <button class="video-close">{_ICON}</button>
+        <div class="cast-wrapper"><button class="video-close cast-btn">{_ICON}</button></div>
+        <button class="video-close">{_ICON}</button>
+        <button class="video-close lightbox-close">{_ICON}</button>
+      </div>
+    </div>
+""")
+LIGHTBOX_WIDTHS = [320, 360, 412, 768, 1024]
+
+
+@pytest.fixture(scope="module")
+def lightbox_bar(tmp_path_factory):
+    fragment = tmp_path_factory.mktemp("lightbox") / "fragment.html"
+    fragment.write_text(LIGHTBOX_BAR, encoding="utf-8")
+    proc = subprocess.run(
+        ["python3", str(HARNESS), ",".join(str(w) for w in LIGHTBOX_WIDTHS),
+         str(fragment), ".lightbox-close", ".video-title"],
+        capture_output=True, text=True, timeout=180)
+    assert proc.returncode == 0, f"probe failed: {proc.stdout}{proc.stderr}"
+    out = json.loads(proc.stdout)
+    assert "error" not in out, f"no measurement: {out}"
+    return out
+
+
+@pytest.mark.parametrize("width", LIGHTBOX_WIDTHS)
+def test_the_lightbox_close_button_is_on_screen(lightbox_bar, width):
+    close = lightbox_bar[str(width)]["boxes"][".lightbox-close"]
+    assert close["right"] <= width, (
+        f"at {width} px the lightbox's close button ends at {close['right']} px")
+
+
+def test_the_file_name_stays_in_the_desktop_lightbox(lightbox_bar):
+    assert lightbox_bar["1024"]["boxes"][".video-title"]["width"] > 200