Monitor: a rung taller than one screen sizes rows to content, since the page scrolls there anyway and the cap only clipped cards

Plugin/unraid/css/varaverk.css

@@ -264,10 +264,13 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
    worked, while landscape (851x393) missed it and inherited the four-row cap — 58px cards with
    overflow:hidden and scrollbars disabled. Nothing was visible and nothing said so.
 
-   The width half is the two-column rung from monitor_board.php (below 696px). It is written as a
-   literal here because a media query cannot read a custom property; if VV_MON_CARD_FLOOR changes,
-   this number and the AI row's two below are the only three places that have to follow it. */
-@media (max-width: 695px), (max-height: 700px) {
+   Height only now. The width half was a literal 695 that had to be kept in step with
+   VV_MON_CARD_FLOOR by hand; monitor_board.php emits these same three rules for every rung whose
+   row count exceeds VV_MON_ROWS_PER_SCREEN — see vv_mon_rung_overflows() — which covers that band
+   and the four-column one above it from the arithmetic instead. What is left here is the case the
+   ladder cannot see: a window wide enough for a rung that does fit a screen, on a screen too short
+   to give those rows a usable height. */
+@media (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; }

Plugin/unraid/include/monitor_board.php

@@ -164,6 +164,25 @@ function vv_mon_rung_rowdiv(int $cols): int {
     return min(vv_mon_rung_rows($cols), VV_MON_ROWS_PER_SCREEN);
 }
 
+// Whether this rung is already taller than one screen. The row-height cap means "no card taller
+// than 1/VV_MON_ROWS_PER_SCREEN of the screen", which is only worth paying for on a rung that
+// fits a screen — there it is what keeps the board from scrolling. On a rung with more rows than
+// the cap the page scrolls no matter what, so the cap buys nothing and only cuts each card's
+// content off. At four columns this board is eight rows: an 11" tablet in landscape was being
+// given 126px cards on a board two screens tall.
+function vv_mon_rung_overflows(int $cols): bool {
+    return vv_mon_rung_rows($cols) > VV_MON_ROWS_PER_SCREEN;
+}
+
+// Rows sized by content instead of by the cap, for a rung that overflows the screen anyway.
+// Mirrors the phone hatch in css/varaverk.css: the cards have to give up overflow:hidden too, or
+// they keep clipping at a height nothing is constraining any more.
+function vv_mon_autorows_css(): string {
+    return '#vv-monitor{grid-auto-rows:auto;}'
+         . '#vv-monitor .vv-card{overflow:visible;}'
+         . '#vv-monitor .vv-card>div{overflow-y:visible;min-height:auto;}';
+}
+
 // The class the page puts on #vv-monitor when a card is not rendered, so the generated absorb
 // rules can fire. Derived from the id on both sides — PHP writes the rule, JS writes the class —
 // so the two can never drift apart by a typo.
@@ -216,6 +235,7 @@ function vv_mon_board_css(): string {
     $out   = '';
 
     $out .= "#vv-monitor{--vv-cols:$top;--vv-rowdiv:" . vv_mon_rung_rowdiv($top) . ";}\n";
+    if (vv_mon_rung_overflows($top)) $out .= vv_mon_autorows_css() . "\n";
 
     $order = 0;
     foreach ($cards as $card) {
@@ -245,6 +265,7 @@ function vv_mon_board_css(): string {
             if ($wide) $out .= implode(',', $wide) . "{--vv-sp:$cols;}";
         }
 
+        if (vv_mon_rung_overflows($cols)) $out .= vv_mon_autorows_css();
         $out .= vv_mon_absorb_css($cols);
         $out .= "}\n";
     }