diff options
| author | Christophe Besson <cbesson@gmail.com> | 2026-08-28 10:15:51 +0200 |
|---|---|---|
| committer | Christophe Besson <cbesson@gmail.com> | 2026-08-28 10:15:51 +0200 |
| commit | a1e4442d3b691b84f20906831713036b6daab62c (patch) | |
| tree | c84abd7206aa58cecf74f38c0546825a0b66e83a | |
| parent | 49a1174114bb3cd50bbcf13157833d59a0eb50a6 (diff) | |
| download | meshbay-a1e4442d3b691b84f20906831713036b6daab62c.tar.gz | |
fix(hub): sidebar — status dot on the name line, not between name and @owner
The @owner line turned the sidebar name into a two-line block, and the
status dot (a flex sibling, align-items:center) floated to its vertical
middle. A group entry is now a flex column: dot+name on one row (.si-head),
@owner on a subordinate line indented past the dot. Non-group sidebar links
are untouched (.sidebar-item stays a row; only .sidebar-group flips).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018gKJ85aZyvEwarXMFzFEwi
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/app.js | 14 | ||||
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 19 |
2 files changed, 26 insertions, 7 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js index 18f34fc..9a0787b 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js @@ -348,14 +348,16 @@ function Sidebar({ groups, presence, indexProgressPct, route, menuOpen, role, ha : t('presence.' + state); return html` <a key=${g.id} - class="sidebar-item ${route === '/group/' + g.id ? 'active' : ''}" + class="sidebar-item sidebar-group ${route === '/group/' + g.id ? 'active' : ''}" href="#/group/${g.id}"> - <span class="presence presence-${state}" - title="${label}" - aria-label="${label}"></span> - <span class="sidebar-item-name"> - <${GroupName} name=${g.name} owner=${g.owner_username} /> + <span class="si-head"> + <span class="presence presence-${state}" + title="${label}" + aria-label="${label}"></span> + <span class="sidebar-item-name">${g.name}</span> </span> + ${g.owner_username && html` + <span class="sidebar-owner">@${g.owner_username}</span>`} </a> `; }) diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 810f06b..6f31047 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -294,6 +294,24 @@ a:hover { text-decoration: underline; } font-size: 0.9em; transition: background 0.12s; } +/* A group entry: the name+dot on one line, the @owner on a subordinate line + under it — so the status dot sits in front of the name, not floating + between the name and the owner. */ +.sidebar-item.sidebar-group { + flex-direction: column; + align-items: stretch; + gap: 1px; +} +.si-head { display: flex; align-items: center; gap: 8px; min-width: 0; } +.sidebar-owner { + margin-left: 16px; /* clear the 8px dot + 8px gap */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.8em; + color: var(--text-dim); +} +.sidebar-item.active .sidebar-owner { color: inherit; opacity: 0.75; } .sidebar-item:hover { background: var(--sidebar-hover); text-decoration: none; } .sidebar-item.active { background: var(--accent); color: var(--accent-text); } @@ -2158,7 +2176,6 @@ a.transfer-name { color: var(--text-dim); } h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } -.sidebar-item.active .gn-owner { color: inherit; opacity: 0.75; } /* ── Chat: paging and orientation ─────────────────────────────────────────── */ |