aboutsummaryrefslogtreecommitdiffstats
path: root/packages/meshbay-hub/src/meshbay_hub/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
-rw-r--r--packages/meshbay-hub/src/meshbay_hub/static/style.css17
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 {