From 3e9c7b492167157d2dffcf22f41f6d97eb41eb90 Mon Sep 17 00:00:00 2001
From: Gmer4Lfe <gmer4lfe@gmail.com>
Date: Sun, 31 May 2026 22:23:14 -0400
Subject: [PATCH] =?UTF-8?q?ui:=20streams=20header=20=E2=80=94=20left/right?=
 =?UTF-8?q?=20groups=20span=20full=20card=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Server badges + media type anchor to the left; device/res/codec anchor
to the right via justify-content:space-between. Right group still
disappears at ≤1024px (now a single display:none on .vv-stream-right).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 Plugin/unraid/css/varaverk.css  | 11 ++++++++---
 Plugin/unraid/pages/monitor.php |  7 +++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/Plugin/unraid/css/varaverk.css b/Plugin/unraid/css/varaverk.css
index 0fd56df..b01af3a 100644
--- a/Plugin/unraid/css/varaverk.css
+++ b/Plugin/unraid/css/varaverk.css
@@ -215,8 +215,8 @@
   #vv-parity-card    { grid-column: auto !important; }
   #vv-storage-card   { grid-column: auto !important; }
   #vv-array-card     { grid-column: auto !important; }
-  /* Streams header: hide device/resolution/codec groups, keep server badges + media type */
-  .vv-chip-group-device, .vv-chip-group-res, .vv-chip-group-codec { display: none; }
+  /* Streams header: hide right chip group entirely, keep server badges + media type */
+  .vv-stream-right { display: none; }
 }
 
 /* Containers+VMs: single column when viewport is narrow */
@@ -750,7 +750,12 @@ mark            { background: #5d4037; color: #ffcc80; border-radius: 2px; }
 .vv-doc-hint { font-size: 12px; color: #666; margin-top: 8px; }
 
 /* Media stream sessions */
-.vv-stream-servers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
+.vv-stream-servers { display: flex; justify-content: space-between; align-items: center;
+                     flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
+/* Left side: server badges + media type */
+.vv-stream-left  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
+/* Right side: device / resolution / codec chip groups */
+.vv-stream-right { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; flex-shrink: 0; }
 .vv-server-badge { background: #333; border: 1px solid #555; color: #aaa;
                    font-size: 10px; padding: 1px 7px; border-radius: 10px; }
 .vv-server-badge-sm { font-size: 9px; padding: 1px 6px; flex-shrink: 0; }
diff --git a/Plugin/unraid/pages/monitor.php b/Plugin/unraid/pages/monitor.php
index add9a31..0dd8277 100644
--- a/Plugin/unraid/pages/monitor.php
+++ b/Plugin/unraid/pages/monitor.php
@@ -1546,7 +1546,7 @@ function vvRenderStreams() {
   const mtypeSection = mtypeBar ? `<span class="vv-device-sep">·</span>${mtypeBar}` : '';
 
   if (sessions.length === 0) {
-    el.innerHTML = `<div class="vv-stream-servers">${badges}</div>`
+    el.innerHTML = `<div class="vv-stream-servers"><div class="vv-stream-left">${badges}</div></div>`
       + '<p class="vv-stream-empty">Nothing playing</p>';
     return;
   }
@@ -1604,7 +1604,10 @@ function vvRenderStreams() {
     ? `<div style="font-size:10px;color:#555;margin-top:4px;">+${sessions.length - 12} more not shown</div>`
     : '';
 
-  el.innerHTML = `<div class="vv-stream-servers">${badges}${mtypeSection}${deviceSection}${resSection}${codecSection}</div>
+  el.innerHTML = `<div class="vv-stream-servers">
+      <div class="vv-stream-left">${badges}${mtypeSection}</div>
+      <div class="vv-stream-right">${deviceSection}${resSection}${codecSection}</div>
+    </div>
     <div style="display:flex;gap:10px;">${sCols.map(vvStreamCol).join('')}</div>${overflow}`;
 }