1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
"""
The Node page is as wide as every other settings-shaped page.
`.node-page` carried `max-width: 700px` of its own while Settings, Profile and
the create-group wizard take `.main`'s width. The Node page's audit tab is a
six-column table — timestamp, event, user, IP, group, detail — with every
fixed-shape column set `white-space: nowrap` so an IP is never clipped, so at
700px it scrolled sideways inside `.node-table-scroll` while a couple of
hundred pixels of `.main` sat empty beside it.
The rule is gone and the class stays, as the anchor for these assertions: the
next narrowing has to get past them.
Rectangles rather than declarations, in the manner `test_layout_measured.py`
established — `max-width: 700px` in a rule says nothing about what the table
inside actually gets, which is the thing that was wrong.
"""
import json
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")
AUDIT_ROWS = [
("02/09/2026 01:14:07", "member_join", "someone", "203.0.113.7",
"A Group Name", "role=member via invite"),
("02/09/2026 01:12:55", "gek_rotate", "an-operator", "198.51.100.42",
"Another Group", "previous key retired, 3 members rewrapped"),
("02/09/2026 00:58:31", "upload_reject", "a-third-person", "192.0.2.198",
"A Group Name", "quarantine full"),
]
# A real Ed25519 public key as the node reports it: 32 bytes of base64, 44
# characters with not one break opportunity among them. Shortening it here
# would measure the fixture instead of the page -- the exact mistake that let
# a folder name and then a translated column head push this page sideways.
NODE_KEY = "kP3vQ8mZ2rT7xN1bY6wL4hJ9cF5dS0aG8eR2uI7oK4M="
def _overview_table():
rows = [
("Version", "0.14.0"),
("Node ID", "203.0.113.7:0"),
("Node key", f'<code class="node-key">{NODE_KEY}</code>'
'<button class="btn btn-small btn-secondary">Copy</button>'),
("QUIC port", "0"),
("Hub", "https://example.invalid"),
]
body = "".join(f"<tr><td>{k}</td><td>{v}</td></tr>" for k, v in rows)
return f"""
<table class="node-table node-table-overview">
<tbody>{body}</tbody>
</table>"""
def _audit_table():
head = "".join(f"<th>{c}</th>" for c in
("Time", "Event", "User", "IP", "Group", "Detail"))
body = "".join("<tr>" + "".join(f"<td>{c}</td>" for c in row) + "</tr>"
for row in AUDIT_ROWS)
return f"""
<div class="node-table-scroll">
<table class="node-table node-table-audit">
<thead><tr>{head}</tr></thead>
<tbody>{body}</tbody>
</table>
</div>"""
# Both pages as the SPA renders them: a `.main` inside the `.layout`, holding
# either `page-content node-page` (node-page.js) or the bare `<div>` that
# settings-page.js and profile-page.js return. No sidebar in either, so the
# only thing that can differ between them is the page's own width.
FRAGMENT = textwrap.dedent(f"""
<div class="layout">
<main class="main">
<div id="node" class="page-content node-page">
<h2>Node</h2>
<div class="node-group">
<h3 class="settings-heading">Overview</h3>
{_overview_table()}
</div>
<div class="node-group">
<h3 class="settings-heading">Audit</h3>
{_audit_table()}
</div>
</div>
</main>
</div>
<div class="layout">
<main class="main">
<div id="settings">
<h2>Settings</h2>
<div class="settings-section">
<h3 class="settings-heading">Downloads</h3>
<p class="page-message">A line of settings text.</p>
</div>
</div>
</main>
</div>
""")
WIDTHS = [320, 360, 412, 768, 1024]
SELECTORS = ["#node.node-page", "#settings", "#node .node-table-scroll",
"#node .node-table-audit", "#node .node-group",
"#node .node-table-overview", "#node .node-key",
"#settings .settings-section"]
@pytest.fixture(scope="module")
def measured(tmp_path_factory):
"""One browser for every width — launching one apiece cost three minutes."""
fragment = tmp_path_factory.mktemp("nodewidth") / "fragment.html"
fragment.write_text(FRAGMENT)
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}"
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_the_node_page_is_the_width_of_a_settings_page(measured, width):
"""The request itself. Same `.main`, same page, same width."""
node = _box(measured, width, "#node.node-page")["width"]
settings = _box(measured, width, "#settings")["width"]
assert node == settings, (
f"at {width} px the Node page is {node} px wide against the Settings "
f"page's {settings} px")
@pytest.mark.parametrize("width", WIDTHS)
def test_a_node_card_lines_up_with_a_settings_card(measured, width):
"""`.node-group` and `.settings-section` are the same rule twice over —
same background, border, radius, padding. They should also be the same
rectangle, or the two pages read as different designs."""
node = _box(measured, width, "#node .node-group")
settings = _box(measured, width, "#settings .settings-section")
assert (node["left"], node["width"]) == (settings["left"], settings["width"]), (
f"at {width} px a node card is {node['width']} px at x={node['left']} "
f"and a settings card {settings['width']} px at x={settings['left']}")
def test_the_audit_table_stops_scrolling_sideways_on_a_desktop(measured):
"""What the width was actually for.
Six columns, five of them `white-space: nowrap`, in a 700px page: the
table was wider than the scroller it sat in, so reading an audit line
meant dragging it sideways — with empty page beside it the whole time.
Measured at 1024px, where `.main` reaches its own 960px cap and the old
rule was the only thing standing between the table and the room it needed.
Below about 800px the viewport was already the tighter constraint, and the
table scrolls there whatever this page is allowed — see the phone case.
"""
table = _box(measured, 1024, "#node .node-table-audit")["width"]
scroller = _box(measured, 1024, "#node .node-table-scroll")["width"]
assert table <= scroller, (
f"the audit table is {table} px inside a {scroller} px scroller — it "
"still has to be dragged sideways on a desktop")
# `max-width: 700px` left roughly 596px here, after `.main`'s 32px padding
# either side and the card's own 20px.
assert scroller > 700, (
f"the audit table has {scroller} px, which is less room than a page "
"capped at 700px would have to give it — the cap is back")
@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_audit_table_still_scrolls_itself_on_a_phone(measured, width):
"""The narrow case is not a regression, it is the design.
Six nowrap columns will never fit a phone. `.node-table-scroll` is what
keeps that contained: the table scrolls inside its own box and the page
does not grow sideways around it.
"""
r = measured[str(width)]
assert r["docScrollW"] <= r["viewport"]["w"], (
f"the document scrolls to {r['docScrollW']} px on a {width} px screen "
"— the audit table is pushing the page wider instead of scrolling")
page = _box(measured, width, "#node.node-page")
assert page["offRight"] == 0, (
f"{page['offRight']} px of the Node page is off a {width} px screen")
@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_node_key_does_not_widen_the_page_on_a_phone(measured, width):
"""The Overview table has no scroller of its own.
`.node-table-audit` may overflow because `.node-table-scroll` contains it.
Overview is a bare `.node-table` in a `.node-group`, so a cell that refuses
to wrap sets the column's minimum width and pushes the document itself
wider than the screen -- which detaches every `position: sticky` element on
the page from a viewport the reader can no longer see, the navigation bar
included. `.node-key` carries `word-break: break-all` for that reason;
remove it and this fails.
"""
r = measured[str(width)]
assert r["docScrollW"] <= r["viewport"]["w"], (
f"the document scrolls to {r['docScrollW']} px on a {width} px screen "
"— the node key is pushing the page wider instead of wrapping")
table = _box(measured, width, "#node .node-table-overview")
card = _box(measured, width, "#node .node-group")
assert table["width"] <= card["width"], (
f"at {width} px the Overview table is {table['width']} px inside a "
f"{card['width']} px card — the key is driving the column")
key = _box(measured, width, "#node .node-key")
assert key["offRight"] == 0, (
f"{key['offRight']} px of the node key is off a {width} px screen")
|