From cab9ba28cfba9d90d0a6c4c00dbba852825f66c2 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Fri, 11 Sep 2026 13:05:21 +0200 Subject: feat(hub): say what MeshBay is on the sign-in page The browser sign-in page now carries the project's pitch beside the form: what MeshBay is, the applications, what it is for, and what meshbay.org does and never sees, with links to the downloads and the legal pages. Text on the left and the form on the right on a desktop; one column, form first, below 1000px. Not shown in the desktop application, whose user has already downloaded it. All ten catalogues carry the text. Every claim is held to MESHBAY_DESIGN.md 2.3: the page says content never reaches the hub, not that the hub can read nothing (T3), and "end-to-end" means device to node. Signed out there is no sidebar, so the 960px main column sat at the left of the window and the sign-in, register and reset forms were centred in it (x=290 in 1440). `.page-center` pages now lift that cap. test_welcome_layout_measured.py measures the real stylesheet in Chrome: no horizontal overflow from 320 to 1440px, form first on narrow screens, form right of the text on desktops, pair centred in the window. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01D9MCBBWSm9GhBESmqzJxNy --- .../tests/test_welcome_layout_measured.py | 142 +++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 packages/meshbay-hub/tests/test_welcome_layout_measured.py (limited to 'packages/meshbay-hub/tests') diff --git a/packages/meshbay-hub/tests/test_welcome_layout_measured.py b/packages/meshbay-hub/tests/test_welcome_layout_measured.py new file mode 100644 index 0000000..da72f34 --- /dev/null +++ b/packages/meshbay-hub/tests/test_welcome_layout_measured.py @@ -0,0 +1,142 @@ +""" +The sign-in page with the welcome text beside it, measured in a browser. + +Two columns on a desktop, one on a phone with the form first, and nothing wider +than the screen at any width. The text is the English catalogue's, at its real +length: a fixture shorter than the real copy measures the fixture. + +The markup is `LoginPage` and `WelcomePitch` as `auth-page.js` renders them, +inside the shell `app.js` puts every page in. What is under test is the +stylesheet, which is served as it ships. +""" + +import json +import re +import shutil +import subprocess +import textwrap +from pathlib import Path + +import pytest + +HARNESS = Path(__file__).parent / "harness" / "layout_probe.py" +STATIC = Path(__file__).resolve().parents[1] / "src" / "meshbay_hub" / "static" + +pytestmark = pytest.mark.skipif( + shutil.which("google-chrome") is None or not (STATIC / "style.css").exists(), + reason="Chrome or the SPA stylesheet is not available") + + +def _en(key: str) -> str: + source = (STATIC / "locales" / "en.js").read_text(encoding="utf-8") + m = re.search(rf"^\s*'{re.escape(key)}': '([^']*)',$", source, re.M) + assert m, f"{key} is missing from en.js" + return m.group(1) + + +def _items(*keys: str) -> str: + return "".join(f"
  • {_en(k)}
    • " for k in keys) + + +def _page() -> str: + li = _items + return textwrap.dedent(f""" + +
    + +
    +

    {_en('welcome.title')}

    +

    {_en('welcome.lead')}

    +
      {li('welcome.app_chat', 'welcome.app_photos', + 'welcome.app_media', 'welcome.app_video', 'welcome.app_music')}
    +

    {_en('welcome.groups')}

    +

    {_en('welcome.e2e')}

    +

    {_en('welcome.uses_title')}

    +
      {li('welcome.use_chat', 'welcome.use_photos', + 'welcome.use_media', 'welcome.use_apps')}
    +

    {_en('welcome.hub_title')}

    +

    {_en('welcome.hub_body')}

    +

    {_en('welcome.hub_never')}

    +
      {li('welcome.never_transit', 'welcome.never_stored', + 'welcome.never_e2e')}
    +

    {_en('welcome.hub_free')}

    +
    {_en('welcome.download')} + {_en('welcome.legal')}
    +
    +
    + """) + + +PHONES = [320, 360, 412] +DESKTOPS = [1100, 1440] +WIDTHS = PHONES + [768] + DESKTOPS +SELECTORS = [".welcome", ".login-card", ".welcome-pitch"] + + +@pytest.fixture(scope="module") +def measured(tmp_path_factory): + fragment = tmp_path_factory.mktemp("welcome") / "fragment.html" + fragment.write_text(_page(), encoding="utf-8") + proc = subprocess.run( + ["python3", str(HARNESS), ",".join(str(w) for w in WIDTHS), + str(fragment), *SELECTORS], + 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}" + for w in WIDTHS: + assert out[str(w)]["viewport"]["w"] == w + return out + + +def _box(measured, width, selector): + box = measured[str(width)]["boxes"][selector] + assert box is not None, f"{selector} did not render at {width} px" + return box + + +@pytest.mark.parametrize("width", WIDTHS) +def test_nothing_is_wider_than_the_screen(measured, width): + """A document wider than the screen unpins every sticky header on Android.""" + assert measured[str(width)]["docScrollW"] <= width, ( + f"the page is {measured[str(width)]['docScrollW']} px wide on a {width} px screen") + for sel in SELECTORS: + box = _box(measured, width, sel) + assert box["offLeft"] == 0 and box["offRight"] == 0, f"{sel} hangs off at {width} px" + + +@pytest.mark.parametrize("width", PHONES + [768]) +def test_a_narrow_screen_shows_the_form_first(measured, width): + card, pitch = _box(measured, width, ".login-card"), _box(measured, width, ".welcome-pitch") + assert pitch["top"] >= card["top"] + card["height"], ( + f"at {width} px the welcome text is not below the sign-in form") + + +@pytest.mark.parametrize("width", DESKTOPS) +def test_a_desktop_puts_the_form_right_of_the_text(measured, width): + """Text on the left, the form on the right with room between them, and + the form up by the title rather than centred on a column far taller.""" + card, pitch = _box(measured, width, ".login-card"), _box(measured, width, ".welcome-pitch") + gap = card["left"] - (pitch["left"] + pitch["width"]) + assert gap >= 80, f"at {width} px the form is {gap} px right of the text" + assert pitch["width"] >= 480, f"the text column is {pitch['width']} px at {width} px" + assert 0 <= card["top"] - pitch["top"] <= 80, ( + f"at {width} px the form starts {card['top'] - pitch['top']} px below the text") + + +def test_the_pair_is_centred_in_the_window(measured): + """Signed out there is no sidebar, and `.main` is capped at 960 px — so + before `.page-center` lifted the cap, a centred form sat centred in the + left 960 px of the window: x=290 in 1440.""" + # Against the document's width, not the window's: the probe's frame is + # shorter than the page, so a vertical scrollbar takes its share. + box = _box(measured, 1440, ".welcome") + middle = measured["1440"]["docScrollW"] / 2 + centre = box["left"] + box["width"] / 2 + assert abs(centre - middle) <= 2, f"the page is centred on x={centre}, not {middle}" -- cgit v1.2.3