Let the system checks reach three columns on a wide monitor
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user