FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert the Monitor column ladder for now; the layout work is paused, not abandoned

Browse Source
This commit is contained in:
Gmer4Lfe
2026-08-22 23:53:27 -04:00
parent bdf1bce4be
commit bd13bdc6e1
2 changed files with 13 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/unraid/css/varaverk.css
+10 -76
View File
@@ -248,75 +248,6 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
align-items:start, not the stretch the grid above uses, so a card opts in to matching the
Assistant rather than being dragged to its height. All three in this row opt in below; the
/* ── Monitor column ladder ────────────────────────────────────────────────────────────────────
The grid lives here rather than in a style="" on the div, which is why nothing below needs
!important any more. An inline style outranks every stylesheet rule, so the old overrides had
to shout to be heard; moving the declaration into the cascade lets the ladder simply cascade.
BREAKPOINTS ARE DERIVED, NOT CHOSEN. A column count is viable exactly when the cards still fit:
window >= N * card-floor + (N-1) * gap + wrap-padding
= N * 200 + (N-1) * 12 + 20
which gives 12:2552 10:2128 8:1704 6:1280 4:856 2:432 1:220. Every value below is that
arithmetic minus one, never a number picked by eye. If .vv-card's 200px min-width ever changes,
these must be recomputed — they are a function of it, not independent settings.
This replaces a single 8 -> 4 step at 1024px, which left a 679px dead zone (1025-1704) where
eight columns were forced into a box that could not hold them. A 1327px tablet in portrait
overflowed by 377px — the "scroll sideways to see the last fifth" bug.
minmax(0, 1fr), not 1fr: bare 1fr means minmax(auto, 1fr), and that auto floor resolves to the
larger of min-content and min-width. One card holding an unbreakable string would otherwise
push its column past its share and drag the whole grid out of the container. The row axis has
carried this guard for a long time (grid-auto-rows: minmax(0, ...)); the column axis never did. */
#vv-monitor {
--vv-cols: 12;
display: grid;
grid-template-columns: repeat(var(--vv-cols), minmax(0, 1fr));
gap: 12px;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 2551px) { #vv-monitor { --vv-cols: 10; } }
@media (max-width: 2127px) { #vv-monitor { --vv-cols: 8; } }
@media (max-width: 1703px) { #vv-monitor { --vv-cols: 6; } }
@media (max-width: 1279px) { #vv-monitor { --vv-cols: 4; } }
@media (max-width: 855px) { #vv-monitor { --vv-cols: 2; } }
@media (max-width: 431px) { #vv-monitor { --vv-cols: 1; } }
/* Spans survive the ladder unchanged from 12 columns down to 4. A span-4 card is half the board
at eight columns and a third at twelve, and that is the point: the cards keep their size while
more of them fit per row, which is the density the wide screens are for.
Only the bottom two rungs need help, because there a span can exceed the whole grid. */
@media (max-width: 855px) {
/* Only two cards exceed a 2-column grid. Named explicitly rather than matched on their
inline style text, which would break the moment a span is edited or reordered. */
#vv-docker-folders, #vv-streams, #vv-array-card { grid-column: span 2; }
}
/* One column: any span >1 would make the grid invent an implicit column and reintroduce
the horizontal scroll this whole ladder exists to remove. After the 2-col clamp above,
deliberately — equal specificity, so source order decides. */
@media (max-width: 431px) {
#vv-monitor > .vv-card { grid-column: 1 / -1; }
}
/* Height, not width, is what makes a phone in landscape unusable. The escape hatch below was
keyed to max-width:480 only, so portrait (393px wide) got content-sized rows and worked, while
landscape (851x393) missed the hatch and inherited the four-row cap: (393-160)/4 = 58px cards,
overflow:hidden, scrollbars disabled. Nothing was visible and nothing said so.
Four capped rows can never be usable below ~700px of viewport, so the cap is dropped and the
page scrolls instead. Everything actually in use stays capped: 1080p full is 210px rows, the
tablet in landscape 263px, in portrait 405px. */
@media (max-width: 855px), (max-height: 700px) {
#vv-monitor { grid-auto-rows: auto; }
#vv-monitor .vv-card { overflow: visible; }
#vv-monitor .vv-card > div { overflow-y: visible; min-height: auto; }
}
default stays start so a card added later has to say so. */
#vv-monitor-ai {
display: grid;
@@ -459,12 +390,13 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
}
@media (max-width: 1024px) {
/* column count now comes from the derived ladder above — see #vv-monitor */
/* #vv-docker was retired from the markup; rule dropped with the ladder rewrite. */
/* The explicit line-based placements these reset (storage 3/span 2, array 5/span 4)
were removed — they pinned column indexes that only existed in an 8-column grid and
made the grid invent implicit columns at every other count. Spans auto-place to the
identical layout at 8, and correctly everywhere else. */
#vv-monitor { grid-template-columns: repeat(4, 1fr) !important; }
#vv-docker { grid-column: span 4 !important; }
/* Reset explicit placements so cards reflow in the 4-col grid */
#vv-docker-folders { grid-column: span 4 !important; }
#vv-parity-card { grid-column: auto !important; }
#vv-storage-card { grid-column: auto !important; }
#vv-array-card { grid-column: auto !important; }
/* Streams header: hide right chip group entirely, keep server badges + media type */
.vv-stream-right { display: none; }
}
@@ -510,7 +442,9 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
.vv-cpu-core { min-width: 6px !important; }
/* Monitor single-column — explicit placement cards need override too */
/* column count now comes from the derived ladder above — see #vv-monitor */
#vv-monitor { grid-template-columns: 1fr !important; }
#vv-monitor > .vv-card { grid-column: 1 / -1 !important; }
#vv-docker-folders { grid-column: 1 / -1 !important; }
}
/* Shared footer (Save Schedule left, info right) — same min-height so log card ends level with script cards */