ui(live-panels): wide live-news/live-webcams panel (764 px) overflows its two 200 px grid tracks, next row paints over the lower half (offline card buttons below the fold)

Symptom

On the Live News panel, when a viewer-picked channel has no live source, the offline card renders with only its icon visible at the bottom of the panel. The Retry, Play next channel and Open on YouTube buttons are below the visible fold and only reachable by scrolling inside the panel. Same layout also hides the second row of the Live Webcams 2x2 wall.

Seen while capturing UI evidence for #8166 (offline card introduced there), desktop 1600x1500, headless Chromium, VITE_E2E=1 VITE_VARIANT=full npm run dev, default layout, right-hand column.

Measurement

Measured with getBoundingClientRect() on both main (6edb8165) and the #8166 head (50e6faf5); numbers are identical, so the fold is pre-existing dashboard layout, not the card:

panel	.panel box height	.panel-content height	next panel painted at	classes / grid-row
live-news	764 px	660 px (688 px on 8166)	+408 px from the panel top	panel panel-wide, span 2
live-webcams	764 px	688 px	+408 px	panel panel-wide, span 2

--dashboard-panel-row-max = 380px, --dashboard-grid-gap = 4px (src/styles/main.css:1631); #panelsGrid grid-auto-rows: minmax(var(--dashboard-panel-row-min), var(--dashboard-panel-row-max)) (main.css:1640), computed as minmax(200px, 380px).

Reading

• src/styles/main.css:1904 gives the wide live-news panel a fixed height: calc(var(--dashboard-panel-row-max) * 2 + var(--dashboard-grid-gap)) = 764 px (the live-webcams wall has the sibling min(...) rule just below).
• The two grid tracks it spans resolve to their 200 px minimum (2 x 200 + gap = 408 px), so the panel box overflows its cell by ~356 px and the next row's panels are painted over the lower half.
• The offline card (.live-offline, height: 100%) centres its icon/text/buttons in the 660 px .panel-content, i.e. around y = 330, which is right at the 408 px fold once the 70 px header is counted. The "Connecting…" cover does not suffer because it is absolutely positioned inside the 16:9 .live-news-player box, and the "Ready when you are" shell fits in the top half.

Questions to study

1. Why do the spanned tracks collapse to minmax()'s 200 px minimum here while the panel keeps a 764 px explicit height? (grid-auto-rows vs the fixed-height rule; content-visibility: auto and contain: layout style on .panel-content may be hiding the intrinsic size from track sizing.)
2. Should the wide live panels size their rows instead of themselves (drop the fixed height, let span 2 tracks grow), or should the tracks get a 380 px floor when a .panel-wide live panel is present?
3. Independent of the grid: should the offline card size itself to the 16:9 player box like the connecting cover does (.live-news-player aspect-ratio: 16 / 9), so its actions are always in the first screen even when a panel is short?

Repro

VITE_E2E=1 VITE_VARIANT=full npm run dev   # or .agents/skills/verify-worldmonitor/scripts/wm-verify.sh launch
# 1600x1500 viewport, /dashboard, default layout
# Live News > gear > Custom channel: https://www.youtube.com/watch?v=aaaaaaaaaaa, name "Dead test video" > Add
# click the "Dead test video" channel button -> offline card; only the icon is visible without scrolling the panel

Related: #8166 (offline card), #8164 (webcam wall), review run 20260916-stack-8163-8168.