diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index 3ec201f..1785260 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -83,10 +83,11 @@ .note { font-size: 0.75rem; color: #555; line-height: 1.5; } .meter { height: 8px; border: 1px solid #000; background: #fff; position: relative; overflow: hidden; } .meter-fill { height: 100%; background: #000; width: 0%; transition: width 0.06s linear; } - /* member rows: badge | handle | pubkey short | meter | mod actions */ + /* member rows: badge | handle | pubkey short | mic | meter — mod actions + * wrap to a 2nd row underneath, indented under the handle */ .member { display: grid; - grid-template-columns: 5.5rem 1fr 4rem 1.4rem 1fr auto; + grid-template-columns: 5.5rem 1fr 4rem 1.4rem 1fr; align-items: center; gap: 0.55rem; padding: 0.35rem 0; border-bottom: 1px dotted #ccc; font-size: 0.85rem; } @@ -105,7 +106,14 @@ .raised { color: #b00; font-weight: bold; } .mic { width: 18px; height: 18px; } .mic svg { width: 18px; height: 18px; display: block; } - .mod-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; } + .mod-actions { + display: flex; gap: 0.3rem; flex-wrap: wrap; + grid-column: 1 / -1; /* second row, full width */ + justify-content: flex-start; + padding-left: 6.05rem; /* line up under the handle (badge col + gap) */ + margin-top: 0.2rem; + } + .mod-actions:empty { display: none; } /* no row gap when nothing to do */ .log { border: 1px solid #000; height: 150px; overflow-y: auto; padding: 0.5rem; font-size: 0.75rem; line-height: 1.5; background: #fafafa; } .log-line { margin-bottom: 0.2rem; word-wrap: break-word; } .log-line .ts { color: #888; } @@ -119,7 +127,7 @@ @media (max-width: 500px) { .member { grid-template-columns: 5rem 1fr 1.4rem; } .member .pub-short, .member .meter { display: none; } - .mod-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 5.6rem; } + .mod-actions { padding-left: 5.55rem; } } @@ -1013,8 +1021,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');