Place the storage and array cards by span, not by column index, so they follow the grid instead of forcing it back to eight

Plugin/unraid/css/varaverk.css

@@ -293,7 +293,7 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
 @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; }
+  #vv-docker-folders, #vv-streams, #vv-array-card { grid-column: span 2; }
 }
 
 /* One column: any span >1 would make the grid invent an implicit column and reintroduce
@@ -461,10 +461,10 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
 @media (max-width: 1024px) {
   /* 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 */
+  /* The explicit line-based placements these reset (storage 3/span 2, array 5/span 4)
-  #vv-parity-card    { grid-column: auto !important; }
+     were removed — they pinned column indexes that only existed in an 8-column grid and
-  #vv-storage-card   { grid-column: auto !important; }
+     made the grid invent implicit columns at every other count. Spans auto-place to the
-  #vv-array-card     { grid-column: auto !important; }
+     identical layout at 8, and correctly everywhere else. */
   /* Streams header: hide right chip group entirely, keep server badges + media type */
   .vv-stream-right { display: none; }
 }

Plugin/unraid/pages/monitor.php

@@ -283,7 +283,7 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
       <div id="vv-parity-body">Loading...</div>
     </div>
 
-    <div class="vv-card" id="vv-storage-card" style="grid-column:3/span 2;">
+    <div class="vv-card" id="vv-storage-card" style="grid-column:span 2;">
       <h3>
         <span style="display:flex;align-items:center;gap:5px;">
           <span class="vv-ico"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#aaa" stroke-width="1.1" stroke-linecap="round"><ellipse cx="6" cy="3" rx="4.5" ry="1.5"/><line x1="1.5" y1="3" x2="1.5" y2="9"/><line x1="10.5" y1="3" x2="10.5" y2="9"/><ellipse cx="6" cy="9" rx="4.5" ry="1.5"/></svg></span>
@@ -295,7 +295,7 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
       <div id="vv-storage-body">Loading...</div>
     </div>
 
-    <div class="vv-card" id="vv-array-card" style="grid-column:5/span 4;">
+    <div class="vv-card" id="vv-array-card" style="grid-column:span 4;">
       <h3>
         <span style="display:flex;align-items:center;gap:5px;">
           <span class="vv-ico"><svg width="14" height="12" viewBox="0 0 14 12" fill="none" stroke="#aaa" stroke-width="1.1" stroke-linecap="round"><rect x="0.7" y="0.7" width="12.6" height="3" rx="0.8"/><rect x="0.7" y="4.5" width="12.6" height="3" rx="0.8"/><rect x="0.7" y="8.3" width="12.6" height="3" rx="0.8"/><circle cx="11.5" cy="2.2" r="0.8" fill="#888" stroke="none"/><circle cx="11.5" cy="6" r="0.8" fill="#888" stroke="none"/><circle cx="11.5" cy="9.8" r="0.8" fill="#888" stroke="none"/></svg></span>