diff --git a/Plugin/unraid/css/varaverk.css b/Plugin/unraid/css/varaverk.css
index 5118a3e..d68f95c 100644
--- a/Plugin/unraid/css/varaverk.css
+++ b/Plugin/unraid/css/varaverk.css
@@ -248,6 +248,75 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
align-items:start, not the stretch the grid above uses, so a card opts in to matching the
Assistant rather than being dragged to its height. All three in this row opt in below; the
+/* ── Monitor column ladder ────────────────────────────────────────────────────────────────────
+ The grid lives here rather than in a style="" on the div, which is why nothing below needs
+ !important any more. An inline style outranks every stylesheet rule, so the old overrides had
+ to shout to be heard; moving the declaration into the cascade lets the ladder simply cascade.
+
+ BREAKPOINTS ARE DERIVED, NOT CHOSEN. A column count is viable exactly when the cards still fit:
+
+ window >= N * card-floor + (N-1) * gap + wrap-padding
+ = N * 200 + (N-1) * 12 + 20
+
+ which gives 12:2552 10:2128 8:1704 6:1280 4:856 2:432 1:220. Every value below is that
+ arithmetic minus one, never a number picked by eye. If .vv-card's 200px min-width ever changes,
+ these must be recomputed — they are a function of it, not independent settings.
+
+ This replaces a single 8 -> 4 step at 1024px, which left a 679px dead zone (1025-1704) where
+ eight columns were forced into a box that could not hold them. A 1327px tablet in portrait
+ overflowed by 377px — the "scroll sideways to see the last fifth" bug.
+
+ minmax(0, 1fr), not 1fr: bare 1fr means minmax(auto, 1fr), and that auto floor resolves to the
+ larger of min-content and min-width. One card holding an unbreakable string would otherwise
+ push its column past its share and drag the whole grid out of the container. The row axis has
+ carried this guard for a long time (grid-auto-rows: minmax(0, ...)); the column axis never did. */
+#vv-monitor {
+ --vv-cols: 12;
+ display: grid;
+ grid-template-columns: repeat(var(--vv-cols), minmax(0, 1fr));
+ gap: 12px;
+ width: 100%;
+ box-sizing: border-box;
+}
+@media (max-width: 2551px) { #vv-monitor { --vv-cols: 10; } }
+@media (max-width: 2127px) { #vv-monitor { --vv-cols: 8; } }
+@media (max-width: 1703px) { #vv-monitor { --vv-cols: 6; } }
+@media (max-width: 1279px) { #vv-monitor { --vv-cols: 4; } }
+@media (max-width: 855px) { #vv-monitor { --vv-cols: 2; } }
+@media (max-width: 431px) { #vv-monitor { --vv-cols: 1; } }
+
+/* Spans survive the ladder unchanged from 12 columns down to 4. A span-4 card is half the board
+ at eight columns and a third at twelve, and that is the point: the cards keep their size while
+ more of them fit per row, which is the density the wide screens are for.
+
+ Only the bottom two rungs need help, because there a span can exceed the whole grid. */
+@media (max-width: 855px) {
+ /* Only two cards exceed a 2-column grid. Named explicitly rather than matched on their
+ inline style text, which would break the moment a span is edited or reordered. */
+ #vv-docker-folders, #vv-streams { grid-column: span 2; }
+}
+
+/* One column: any span >1 would make the grid invent an implicit column and reintroduce
+ the horizontal scroll this whole ladder exists to remove. After the 2-col clamp above,
+ deliberately — equal specificity, so source order decides. */
+@media (max-width: 431px) {
+ #vv-monitor > .vv-card { grid-column: 1 / -1; }
+}
+
+/* Height, not width, is what makes a phone in landscape unusable. The escape hatch below was
+ keyed to max-width:480 only, so portrait (393px wide) got content-sized rows and worked, while
+ landscape (851x393) missed the hatch and inherited the four-row cap: (393-160)/4 = 58px cards,
+ overflow:hidden, scrollbars disabled. Nothing was visible and nothing said so.
+
+ Four capped rows can never be usable below ~700px of viewport, so the cap is dropped and the
+ page scrolls instead. Everything actually in use stays capped: 1080p full is 210px rows, the
+ tablet in landscape 263px, in portrait 405px. */
+@media (max-width: 855px), (max-height: 700px) {
+ #vv-monitor { grid-auto-rows: auto; }
+ #vv-monitor .vv-card { overflow: visible; }
+ #vv-monitor .vv-card > div { overflow-y: visible; min-height: auto; }
+}
+
default stays start so a card added later has to say so. */
#vv-monitor-ai {
display: grid;
@@ -390,10 +459,9 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
}
@media (max-width: 1024px) {
- #vv-monitor { grid-template-columns: repeat(4, 1fr) !important; }
- #vv-docker { grid-column: span 4 !important; }
+ /* column count now comes from the derived ladder above — see #vv-monitor */
+ /* #vv-docker was retired from the markup; rule dropped with the ladder rewrite. */
/* Reset explicit placements so cards reflow in the 4-col grid */
- #vv-docker-folders { grid-column: span 4 !important; }
#vv-parity-card { grid-column: auto !important; }
#vv-storage-card { grid-column: auto !important; }
#vv-array-card { grid-column: auto !important; }
@@ -442,9 +510,7 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
.vv-cpu-core { min-width: 6px !important; }
/* Monitor single-column — explicit placement cards need override too */
- #vv-monitor { grid-template-columns: 1fr !important; }
- #vv-monitor > .vv-card { grid-column: 1 / -1 !important; }
- #vv-docker-folders { grid-column: 1 / -1 !important; }
+ /* column count now comes from the derived ladder above — see #vv-monitor */
}
/* Shared footer (Save Schedule left, info right) — same min-height so log card ends level with script cards */
diff --git a/Plugin/unraid/pages/monitor.php b/Plugin/unraid/pages/monitor.php
index 4c9740e..836e6fb 100644
--- a/Plugin/unraid/pages/monitor.php
+++ b/Plugin/unraid/pages/monitor.php
@@ -104,7 +104,7 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
-