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

The gpu box's layout rules, which the first commit lost

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-10-02 22:53:50 -07:00
co-authored by Claude Fable 5.1
parent b44faf3ac9
commit 7e070bd524
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+20 -1
View File
@@ -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; }