diff --git a/Plugin/unraid/pages/ai.php b/Plugin/unraid/pages/ai.php index 48a17ec..7452b63 100644 --- a/Plugin/unraid/pages/ai.php +++ b/Plugin/unraid/pages/ai.php @@ -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; }