mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

A graph's canvas is out of flow, so a box can never grow itself without end

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-10-02 22:54:49 -07:00
co-authored by Claude Fable 5.1
parent 7e070bd524
commit a8f4655c83
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+7 -2
View File
@@ -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-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; } .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 */ /* 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-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.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; } .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; } .t-load { display: flex; margin-top: 2px; }
/* the dot graph and the dotted meter */ /* 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 { 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, .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); } .tm-t { background: var(--border); }