ui: streams header — left/right groups span full card width

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>
This commit is contained in:
Gmer4Lfe
2026-05-31 22:23:14 -04:00
co-authored by Claude Sonnet 4.6
parent 3e89997ab5
commit 3e9c7b4921
2 changed files with 13 additions and 5 deletions
+8 -3
View File
@@ -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; }
+5 -2
View File
@@ -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}`;
}