diff options
Diffstat (limited to 'packages')
| -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 ─────────────────────────────────────────── */ |