Derive Monitor's column count from what the cards actually need, so no width forces a sideways scroll

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; }
+  /* column count now comes from the derived ladder above — see #vv-monitor */
-  #vv-docker  { grid-column: span 4 !important; }
+  /* #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; }
+  /* column count now comes from the derived ladder above — see #vv-monitor */
-  #vv-monitor > .vv-card { grid-column: 1 / -1 !important; }
-  #vv-docker-folders { grid-column: 1 / -1 !important; }
 }
 
 /* Shared footer (Save Schedule left, info right) — same min-height so log card ends level with script cards */

Plugin/unraid/pages/monitor.php

@@ -104,7 +104,7 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
 
 <div id="vv-api-banner" style="display:none;border-radius:4px;padding:5px 10px;margin-bottom:8px;font-size:11px;"></div>
 
-<div id="vv-monitor" style="display:grid;grid-template-columns:repeat(8,1fr);gap:12px;width:100%;box-sizing:border-box;">
+<div id="vv-monitor">
 
     <!-- Row 1: System | Power | CPU | Memory | Network -->
     <div class="vv-card" id="vv-system" style="grid-column:span 1;">