Let the system checks reach three columns on a wide monitor

This commit is contained in:
Gmer4Lfe
2026-08-04 17:49:20 -04:00
parent 89d6219e95
commit 961c57c6f0
+10 -4
View File
@@ -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
narrow to give each that much — so the 900px collapse above needs no matching breakpoint. */
#vv-ai-health { columns:220px 2; column-gap:18px; }
across the split. `columns: 220px 3` is a ceiling, not a count — the browser uses as many
columns as fit at 240px and drops to two, then one, as the card narrows, so neither the
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; }