Monitor: hold the System card to the Network card's height below eight columns, where the two stop sharing a row

This commit is contained in:
Gmer4Lfe
2026-08-25 17:07:18 -04:00
parent d289a9101c
commit 74c6a0f5eb
2 changed files with 18 additions and 20 deletions
+17 -19
View File
@@ -235,28 +235,26 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
/* Hide scrollbars on any nested scrollable div inside monitor cards */
#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.
/* System card, held to the Network card's height.
At eight columns these two share a row (system 1 + ups 1 + cpu 2 + memory 2 + network 2), so
the grid already stretches them to the same height and nothing here is needed. Below eight the
board re-cuts into rows of four: System lands in row 1 with UPS and CPU, Network in row 2 with
Memory, and once rows are sized to content (vv_mon_rung_overflows) the two are free to differ.
System is the taller — it carries a host block and a Varaverk block — so it is the one 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.
222px is Network measured rather than guessed: 2 border + 24 padding + 25 h3 + 61 header block
+ 110 canvas. The canvas is a fixed 110px, which is what makes the number worth writing down —
most of Network's height cannot drift. What can is the IP list (LAN/EXT/TS), roughly 18px a row,
so a host resolving fewer of the three leaves System slightly tall against it.
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;
Two ids on the selectors, to outrank #vv-monitor .vv-card from the auto-rows hatch above. That
hatch lifts overflow off every card so content-sized rows can work; this card is the one place
the clamps have to go back on, or a max-height with overflow:visible would draw straight
through the card's own border. */
@media (max-width: 1383px), (max-height: 700px) {
#vv-monitor #vv-system { max-height: 222px; overflow: hidden; }
#vv-monitor #vv-system > div { overflow-y: auto; min-height: 0; }
}
#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.
minmax(0, Xpx): track is content-driven but capped; align-items:stretch makes all cards