From 37473b29c02f2dc70eb9ba46d596f503a01c5845 Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Sun, 6 Sep 2026 03:40:16 +0200
Subject: fix(node): inline @owner next to group name, fix buffering layout
 shift

Put the @owner handle on the same line as the group name (flex baseline)
to save a row on mobile. Move the video buffering indicator inside the
video-container as an absolute overlay so it no longer pushes the video
down when it appears briefly during seeks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/meshbay-hub/src/meshbay_hub/static/style.css     | 14 +++++++++-----
 .../meshbay-hub/src/meshbay_hub/static/video-player.js    | 15 +++++++--------
 2 files changed, 16 insertions(+), 13 deletions(-)

(limited to 'packages/meshbay-hub')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index bc4e093..c183d7e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -1490,12 +1490,17 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .video-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   text-align: center;
   color: #94a3b8;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .video-loading-label {
-  margin-bottom: 16px;
   font-size: 0.95em;
 }
 
@@ -2287,23 +2292,22 @@ a.transfer-name {
   min-width: 0;
 }
 
-/* Group name + its @owner handle, stacked. Names are unique only per owner
+/* Group name + its @owner handle, on one line. Names are unique only per owner
    account, so the handle is what tells two "photos" groups apart. */
-.gn { display: block; min-width: 0; }
+.gn { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
 .gn-name {
-  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .gn-owner {
-  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.8em;
   font-weight: 400;
   color: var(--text-dim);
+  flex-shrink: 0;
 }
 h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
index 0c0c6c7..4f8a4e4 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
@@ -1054,17 +1054,16 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) {
           <${Icon} name="close" /></button>
       </div>
 
-      ${phase === 'loading' && html`
-        <div class="video-loading">
-          <div class="video-loading-label">
-            <span class="spinner"></span>${' '}${t('video.buffering')}
-          </div>
-        </div>
-      `}
-
       ${(phase === 'streaming' || phase === 'loading') && html`
         <div class="video-container">
           <video ref=${videoRef} controls autoplay />
+          ${phase === 'loading' && html`
+            <div class="video-loading">
+              <div class="video-loading-label">
+                <span class="spinner"></span>${' '}${t('video.buffering')}
+              </div>
+            </div>
+          `}
           ${resumedFrom > 0 && html`
             <div class="video-resumed">
               ${t('video.resumed_at', { time: formatClock(resumedFrom) })}
-- 
cgit v1.2.3