From 39c58b807d5f62ee55b606ceb79f21855221a8d0 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Sat, 19 Sep 2026 18:32:47 +0200 Subject: fix(hub): the members table stops hanging off the side of a phone `.admin-table` column heads are `white-space: nowrap`, which meets a translated string: "Username" is one word, "Nom d'utilisateur" is three, uppercased with letter-spacing on top. The heads alone overflowed a 360px window by 11px, and on Android an overflowing document takes every sticky element with it. 11px was only what could be measured: the probe served no members, so the table measured its headers and nothing else. With one realistic username in it the same page overflowed by 248px, at 420px-wide windows too. The cells get `word-break: break-word`, as `.file-name` already had. Co-Authored-By: Claude Opus 5 --- packages/meshbay-hub/src/meshbay_hub/static/style.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'packages/meshbay-hub/src') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 81ae895..63f631a 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -2110,6 +2110,14 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } border-collapse: collapse; font-size: 0.88em; } +/* A column head is a *translated* string, so its length is not ours to assume: + "Username" is one word in English and "Nom d'utilisateur" is three in French, + and uppercased with letter-spacing on top. Under `white-space: nowrap` the + longer one sets the column's minimum width, and the whole table hangs off the + side of a phone — which on Android takes every `position: sticky` element + with it, the fault already recorded against the Files table one table along. + A head that wraps onto two lines is legible; a table the reader cannot reach + the right of is not. */ .admin-table th { text-align: left; padding: 8px 10px; @@ -2119,12 +2127,19 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; - white-space: nowrap; + white-space: normal; } +/* And the same rule as `.file-name`, for the same reason: these cells carry + names somebody else chose — a username, a group name — and a name with no + spaces in it has nowhere to break unless it is told to. The heads alone cost + 11px of overflow at 360px; with a realistic username in the fixture it was + 248px, and it reached 420px-wide windows too. */ .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; + word-break: break-word; + min-width: 0; } .admin-table tr:hover { background: var(--bg-raised); } .admin-table .admin-empty { -- cgit v1.2.3