1 files changed, 99 insertions, 8 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 828e104..cb56321 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -940,6 +940,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
   padding: 8px 0;
 }
 .settings-row + .settings-row {
@@ -989,6 +991,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   padding: 12px 20px;
   z-index: 210;
 }
@@ -1000,7 +1003,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: calc(100% - 60px);
+  flex: 1;
+  min-width: 0;
 }
 
 .video-close {
@@ -1242,16 +1246,103 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   font-style: italic;
 }
 
-/* A row whose actions cell is empty — the group owner, who cannot be removed,
-   or your own account in the admin table — used to sit lower than the rest:
-   `display: flex` makes the cell the height of its button, and nothing when
-   there is no button. Reserving the height keeps every row aligned without
-   rendering a disabled button nobody can use. */
+/* Two things this cell has to do: hold a row of buttons, and stay as tall as
+   the rest of its row even when it is empty — the group owner cannot be
+   removed, and neither can your own account in the admin table.
+
+   `display: flex` did the second one and broke the first. **A flex <td> stops
+   being a table cell**: it no longer stretches to the height of its row, so
+   its bottom border is drawn wherever its own content ends. Measured, in a row
+   whose other cells were `top 76, height 40`, the actions cell came out
+   `top 77, height 30` — its rule nine pixels above the rest, which is the
+   staggered lines across the members table.
+
+   So the cell goes back to being a table cell, and an empty one is held open
+   by a zero-width strut the height of a button. Reported as "un décalage sur
+   les lignes du tableau listant les membres". */
 .admin-actions {
+  white-space: nowrap;
+}
+.admin-actions::before {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 30px;
+  vertical-align: middle;
+}
+.admin-actions > * { vertical-align: middle; }
+.admin-actions > * + * { margin-left: 6px; }
+
+/* ── Group settings sections ──────────────────────────────────────────────
+   The group tab was three forms and a table, each laid out with inline styles
+   on the element that needed it, which is why no two of them lined up. These
+   are the pieces they all wanted. */
+
+/* An input and its button. Wraps rather than overflowing on a phone, and the
+   input takes the slack so the button keeps its size. */
+.form-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.form-row input {
+  flex: 1;
+  min-width: 160px;
+}
+
+/* A pairing or invitation code: typed one character at a time, off a screen or
+   a piece of paper, so it is spaced and unambiguous. */
+.code-input,
+.code-display {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.code-display {
+  font-size: 1.4em;
+  letter-spacing: 2px;
+  margin: 6px 0;
+}
+
+.settings-subform {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+
+.device-list {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+}
+.device-row {
   display: flex;
-  gap: 6px;
   align-items: center;
-  min-height: 30px;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+.device-row:last-child { border-bottom: none; }
+.device-key {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+}
+.device-meta {
+  color: var(--text-secondary);
+  font-size: 0.85em;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Leaving or deleting a group. Marked, because the two buttons in this tab
+   that cannot be undone should not look like the ones that can. */
+.danger-section {
+  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
+}
+.danger-section .settings-heading { color: var(--error); }
+
+.badge-owner {
+  background: var(--accent);
+  color: var(--accent-text);
 }
 
 .admin-btn {