From a8f4655c83cf5fdb7ef1d1e3507abdc694ae0efa Mon Sep 17 00:00:00 2001 From: Mitchell-Johnson Date: Fri, 2 Oct 2026 22:54:49 -0700 Subject: [PATCH] A graph's canvas is out of flow, so a box can never grow itself without end The gpu box sat in an auto-height grid row. The canvas inside it was sized from its box and also sized the box, so every resize fed the next and the Processes tab grew for as long as it was open. The canvas is now absolute within its box, and the gpu row has a floor instead of auto. Co-Authored-By: Claude Fable 5.1 --- web/src/styles.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/web/src/styles.css b/web/src/styles.css index 514aa8c..ba92d5d 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -637,7 +637,7 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, .top-cpu { grid-column: 1 / -1; } .top-mem { grid-column: 1; grid-row: 2; } .top-disks { grid-column: 2; grid-row: 2; } .top-net { grid-column: 1 / 3; grid-row: 3; } .top-proc { grid-column: 3; grid-row: 2 / 4; } /* a machine with a GPU gets a row of gpu boxes under the cpu, as btop lays it out; the rest move down one */ -.top.has-gpu { grid-template-rows: minmax(200px, 1fr) auto auto minmax(170px, 1fr); } +.top.has-gpu { grid-template-rows: minmax(200px, 1fr) minmax(210px, auto) auto minmax(170px, 1fr); } .top-gpus { grid-column: 1 / -1; grid-row: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; min-width: 0; } .top.has-gpu .top-mem, .top.has-gpu .top-disks { grid-row: 3; } .top.has-gpu .top-net { grid-row: 4; } .top.has-gpu .top-proc { grid-row: 3 / 5; } .top-gpu { min-height: 210px; } @@ -679,7 +679,12 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, .t-load { display: flex; margin-top: 2px; } /* the dot graph and the dotted meter */ -.tg { width: 100%; height: 100%; flex: 1; min-height: 0; overflow: hidden; } +/* The canvas is taken out of flow. Its drawing size is set from the box it sits in; if it also + sat *in* that box and the box's height was ever content-sized, each resize would set a bigger + canvas, which would make a bigger box, which would set a bigger canvas — the Processes tab + growing without end, as it did when the gpu box landed in an auto-height row. */ +.tg { position: relative; width: 100%; height: 100%; flex: 1; min-height: 0; overflow: hidden; } +.tg canvas { position: absolute; inset: 0; } .tm { position: relative; display: inline-block; height: 9px; flex: 1; min-width: 24px; vertical-align: middle; } .tm-t, .tm-f { position: absolute; inset: 0; -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); } .tm-t { background: var(--border); }