diff --git a/Plugin/unraid/pages/rsync.php b/Plugin/unraid/pages/rsync.php index ed2ff3c..7c7b205 100644 --- a/Plugin/unraid/pages/rsync.php +++ b/Plugin/unraid/pages/rsync.php @@ -55,8 +55,16 @@ require_once dirname(__DIR__) . '/include/ai_chat.php'; .vv-ry-dot { display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-right:5px;margin-bottom:-1px; } /* Window cards row */ -.vv-ry-wins { grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px; } -@media (max-width:900px) { .vv-ry-wins { grid-template-columns:repeat(2,1fr); } } +/* One row, however many windows there are. The count comes from _windowsRow() as --vv-win-n + rather than being written here: this said repeat(5,1fr) against six windows, so Fallback sat + alone on a second row — and the next window added would have done the same thing again. + Grid, not flex, so every card is exactly the same width. */ +.vv-ry-wins { grid-column:1/-1;display:grid; + grid-template-columns:repeat(var(--vv-win-n,6),1fr);gap:10px; } +/* Degrades in stages rather than dropping straight to two — six across needs roughly 1100px, + and the dashboard runs on 15" panels where the middle step is the one that gets used. */ +@media (max-width:1400px) { .vv-ry-wins { grid-template-columns:repeat(3,1fr); } } +@media (max-width:900px) { .vv-ry-wins { grid-template-columns:repeat(2,1fr); } } .vv-ry-win { background:#161616;border:1px solid #2a2a2a;border-radius:6px;padding:10px 12px; } .vv-ry-win.enabled { border-color:#1a3a1a; } @@ -812,7 +820,9 @@ function _windowsRow(data) { `; }); - return `
${cards.join('')}
`; + // The column count travels with the cards, so adding a window to WIN_META widens the row + // instead of quietly starting a second one. + return `
${cards.join('')}
`; } // ── Bandwidth section ─────────────────────────────────────────────────────────