Monitor: cap the System card's Varaverk block so the host figures set the card's height, not the sum of both

This commit is contained in:
Gmer4Lfe
2026-08-25 17:01:52 -04:00
parent 9553ecb16a
commit d289a9101c
2 changed files with 25 additions and 1 deletions
+23
View File
@@ -235,6 +235,29 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
/* Hide scrollbars on any nested scrollable div inside monitor cards */ /* Hide scrollbars on any nested scrollable div inside monitor cards */
#vv-monitor .vv-card div::-webkit-scrollbar { display: none; } #vv-monitor .vv-card div::-webkit-scrollbar { display: none; }
/* System card: the Varaverk half is bounded, the host half is not.
This card is the one with no <h3>, so the header/body split that gives every other card a
fixed part and a scrolling part had to be made inside its body. The cut is after Version:
hostname, clock, model, array state, uptime, load and version are what the card is for and
are left to size themselves, and only the block below them is capped.
A plain max-height, not flex:1 on the capped half. Under flex the strip is sized by what the
block above leaves over, and on a 1080p row (177px against a ~190px host half) that remainder
is negative: the strip collapses to nothing and the Varaverk figures vanish with no scrollbar
to say so. A fixed cap cannot do that — the block is 64px wherever it lands, and where the card
is shorter than the two halves together the body's own scroll (inherited above) reaches the rest.
64px is the label and about three rows of the Varaverk grid, so Cache, Data and Jobs read
without scrolling. It also holds the card to ~254px, which is what stops it dragging its row
down below eight columns, where rows are sized to content (see vv_mon_rung_overflows). */
#vv-system-body .vv-sys-scroll {
max-height: 64px;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
#vv-system-body .vv-sys-scroll::-webkit-scrollbar { display: none; }
/* Dynamic row heights capped per screen tier — rows size to content, never exceed the cap. /* Dynamic row heights capped per screen tier — rows size to content, never exceed the cap.
minmax(0, Xpx): track is content-driven but capped; align-items:stretch makes all cards minmax(0, Xpx): track is content-driven but capped; align-items:stretch makes all cards
in a row fill the track, so short cards (Pools, Watchdog) match tall ones (Array). in a row fill the track, so short cards (Pools, Watchdog) match tall ones (Array).
+2 -1
View File
@@ -1079,9 +1079,10 @@ function vvPollMonitor(live) {
<span style="color:#444;">Running</span> <span style="color:#888;">${_runningCtrs} ctr${_runningCtrs !== 1 ? 's' : ''}${_runningVMs > 0 ? ` · ${_runningVMs} VM` : ''}</span> <span style="color:#444;">Running</span> <span style="color:#888;">${_runningCtrs} ctr${_runningCtrs !== 1 ? 's' : ''}${_runningVMs > 0 ? ` · ${_runningVMs} VM` : ''}</span>
<span style="color:#444;">Version</span> <span style="color:#3a3a3a;">${ver}</span> <span style="color:#444;">Version</span> <span style="color:#3a3a3a;">${ver}</span>
</div> </div>
<!-- Varaverk's own figures, ruled off from the host's. Same grid so the labels line up, <!-- Varaverk's own figures, ruled off from the host's. Same grid so the labels line up,
separate block so it reads as a different subject rather than more of the same. --> separate block so it reads as a different subject rather than more of the same. -->
<div style="border-top:1px solid #1e1e1e;margin-top:8px;padding-top:7px;"> <div class="vv-sys-scroll" style="border-top:1px solid #1e1e1e;margin-top:8px;padding-top:7px;">
<div style="font-size:9px;color:#333;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;">Varaverk</div> <div style="font-size:9px;color:#333;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;">Varaverk</div>
<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px;"> <div style="display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px;">
<span style="color:#444;">Cache</span> <span style="color:${_cacheColor};">${_cacheStr}</span> <span style="color:#444;">Cache</span> <span style="color:${_cacheColor};">${_cacheStr}</span>