Align the System checks card with the third banner stat

This commit is contained in:
Gmer4Lfe
2026-08-04 17:44:30 -04:00
parent 131c9ffc13
commit 89d6219e95
+18 -1
View File
@@ -133,7 +133,11 @@ if (is_dir('/var/log/varaverk')) {
.vv-ai-meta { font-size:10px; color:#333; margin-top:6px; font-family:monospace; }
/* ── Health + loaded models ─────────────────────────────────────────────── */
.vv-ai-diag { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#1a1a1a;
/* The split lines the System checks card up with the right edge of the third banner stat.
Both rows carry a 1px border and a 1px gap, so their track origins coincide and the
fractions match exactly. The default suits the usual five stats; renderBanner() overrides
--vv-diag-split when the banner renders a different number. */
.vv-ai-diag { display:grid; grid-template-columns:var(--vv-diag-split,3fr 2fr); gap:1px; background:#1a1a1a;
border:1px solid #262626; border-radius:6px; overflow:hidden; }
@media (max-width:900px) { .vv-ai-diag { grid-template-columns:1fr; } }
.vv-ai-diag-col { background:#0e0e0e; padding:9px 12px; }
@@ -338,6 +342,19 @@ if (is_dir('/var/log/varaverk')) {
rt.gpu.name + ' · ' + rt.gpu.util + '% util');
}
$('vv-ai-banner').innerHTML = html;
// Keep the diag row's split on the third stat's edge. The stat count is not fixed — VRAM
// needs a readable GPU, Built needs an index, and an unreachable Ollama collapses the first
// two into one — so it is read off what actually rendered rather than assumed.
//
// Written as a custom property, never as grid-template-columns: an inline value would
// outrank the 900px media query that collapses this row to a single column. Below four
// stats there is no third edge to meet, so it falls back to the default.
const diag = document.querySelector('.vv-ai-diag');
const nStat = $('vv-ai-banner').children.length;
if (diag) diag.style.setProperty('--vv-diag-split',
nStat > 3 ? `3fr ${nStat - 3}fr` : '3fr 2fr');
renderHealth(s.health || []);
renderModels(s.loaded, s.model);
}