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

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 ─────────────────────────────────────────── */