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 <noreply@anthropic.com>

1 files changed, 16 insertions, 1 deletions

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 {