Let the system checks reach three columns on a wide monitor

2026-08-04 17:49:20 -04:00
parent 89d6219e95
commit 961c57c6f0
1 changed files with 10 additions and 4 deletions
@@ -143,11 +143,17 @@ if (is_dir('/var/log/varaverk')) {
 .vv-ai-diag-col { background:#0e0e0e; padding:9px 12px; }
 .vv-ai-diag-h { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#4a4a4a;
                margin-bottom:6px; display:flex; align-items:center; gap:7px; }
-/* The checks run two columns filled top to bottom. Multi-column, not grid: grid fills
+/* The checks fill top to bottom, up to three columns. Multi-column, not grid: grid fills
   row-major, which would put consecutive checks side by side and scatter the reading order
-   across the split. `columns: 220px 2` caps it at two and drops to one when the card is too
+   across the split. `columns: 220px 3` is a ceiling, not a count — the browser uses as many
-   narrow to give each that much — so the 900px collapse above needs no matching breakpoint. */
+   columns as fit at 240px and drops to two, then one, as the card narrows, so neither the
-#vv-ai-health { columns:220px 2; column-gap:18px; }
+   900px collapse above nor the diag split needs a matching breakpoint.
   240px is picked against both ends, not by eye. Above: at 220 the third column arrives around
   1160px of content, which is a laptop, and the model tag then wraps in every column — 240
   holds it back to ~1300. Below: 900px is where the diag un-stacks and this card drops from
   full width to 3/5, its narrowest point at ~516px; 240 still fits two there, where 250 falls
   to one and leaves a dead band just above the breakpoint. */
 #vv-ai-health { columns:240px 3; column-gap:18px; }
 .vv-ai-chk { display:flex; align-items:flex-start; gap:7px; font-size:11px; padding:2px 0; line-height:1.5;
             break-inside:avoid; }
 .vv-ai-chk-i { flex-shrink:0; font-size:11px; width:12px; }