From 7e070bd524071573ad927d73a77073e888ec997e Mon Sep 17 00:00:00 2001 From: Mitchell-Johnson Date: Fri, 2 Oct 2026 22:53:50 -0700 Subject: [PATCH] The gpu box's layout rules, which the first commit lost The desktop grid placement, the stats panel, the engine label width and the client rows' columns were never in the stylesheet: on a phone the caption sat on the stats head, 'enhance' ran into its meter, and a client row came out as one word. Restored, with the graph box as tall as the cpu's so its caption always has a line of its own. Co-Authored-By: Claude Fable 5.1 --- web/src/styles.css | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/web/src/styles.css b/web/src/styles.css index 809215e..514aa8c 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -636,6 +636,25 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, .top-mem, .top-disks { min-height: 165px; } /* a grid row set to auto will otherwise squeeze them to nothing */ .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-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; } +.t-gpu { display: flex; gap: 8px; min-width: 0; flex: 1; min-height: 0; } +/* the graph and its caption share this box: tall enough for both, so the caption never lands on the stats */ +.t-gpu-graph { flex: 1; min-width: 0; min-height: 130px; display: flex; flex-direction: column; } +.t-gpu-stats { width: 310px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 3px; padding: 4px 6px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; scrollbar-width: thin; } +.t-gpu-stats .t-core-n { width: 58px; } /* room for "enhance" — the cpu box's 30px fits "C15", not an engine's name */ +.t-gpu-name { color: var(--fg); overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } +.t-core-n.t-eng { color: var(--muted); font-size: 12px; } +.t-gpu-facts { margin-top: 2px; } .t-gpu-facts .t-row { gap: 6px; } .t-fact { color: var(--fg); white-space: nowrap; } +.t-gpu-facts .tm { flex: 1; } +.t-gpu-clients { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 2px; } +.t-gpu-clients .t-thead, .t-crow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 50px 46px; gap: 7px; align-items: center; white-space: nowrap; } +.t-gpu-clients .t-thead { border-bottom: 0; padding-right: 0; } +.t-crow > span { min-width: 0; overflow: hidden; } .t-crow .c-name { color: var(--ok); text-overflow: ellipsis; } .t-crow .c-cpu { color: var(--fg); } +.t-crow-none { display: block; font-size: 12px; padding: 1px 0; } .tbox { position: relative; border: 1px solid var(--border); border-radius: 3px; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .tbox-in { flex: 1; min-height: 0; min-width: 0; padding: 9px 8px 6px; display: flex; flex-direction: column; overflow: hidden; } .tbox-name, .tbox-right { position: absolute; top: -9px; background: var(--term-bg); padding: 0 4px; font-size: 12px; white-space: nowrap; z-index: 1; } @@ -734,7 +753,7 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, .top { display: flex; flex-direction: column; font-size: 12px; } .top > .tbox { flex: 0 0 auto; } .top-gpus { display: flex; flex-direction: column; flex: 0 0 auto; } - .t-gpu { flex-direction: column; } .t-gpu-graph { height: 110px; flex: 0 0 110px; } .t-gpu-stats { width: auto; max-height: none; } + .t-gpu { flex-direction: column; } .t-gpu-graph { height: 130px; flex: 0 0 130px; } .t-gpu-stats { width: auto; max-height: none; } .t-cpu { flex-direction: column; } .t-cpu-graph { height: 130px; flex: 0 0 130px; } .t-cores { width: auto; max-height: 40vh; } .t-net { flex-direction: column; } .t-net-nums { width: auto; } .t-net-graphs { flex: 0 0 130px; } .top-proc { height: 70vh; min-height: 420px; }