Problem
Two related layout issues in the "Additional Metrics" row and the chart beneath it:
1. Busiest Node card wastes horizontal space
BusiestNodeCard.svelte's .node-resources block (lines ~46-62) stacks CPU, RAM and SSD as
three full-width rows, each with its own heading line, a full-width horizontal ASCII bar
(formatAsciiBar()), and a detail line -- 3 lines x 3 resources = 9 lines of vertical space,
on a card that's otherwise fairly narrow. The card's identity line and app-name pill list have
to compete with that for room, and the pill list is already capped at max-height: 6.5rem with
its own scrollbar.
Reorienting CPU/RAM/SSD to sit side-by-side (three columns) instead of stacked rows would use
the card's width -- which the current layout leaves mostly idle -- to free up vertical space
for the identity line and the app list.
2. Historical Performance chart looks small relative to the row above it
+page.svelte's "Additional Metrics" row (stats-grid-wide, ~line 451) holds three
CSS-grid-stretched cards (Total App Instances, Busiest Node, Decentralization) that all match
the tallest one's height -- currently Busiest Node, per point 1 above. The `` right
below it (~line 476) has a hardcoded `height={400}` prop, independent of that row's height.
When the stretched row gets tall, the chart reads as undersized by comparison even though its
absolute height hasn't changed.
Possible directions (not decided -- needs a mockup/sign-off pass before implementing, same as #127)
- Make Busiest Node's resource display more compact (vertical/side-by-side bars or small radial
gauges instead of 3 stacked horizontal bars) so the Additional Metrics row is naturally
shorter, closing the gap with the chart's fixed height.
- And/or increase the chart's height (or make it responsive to the row's height) so it reads as
proportionate regardless of how tall Additional Metrics ends up.
- Both together is also reasonable -- they're not mutually exclusive.
Scope
src/lib/components/BusiestNodeCard.svelte -- .node-resources/.resource-row markup + CSSsrc/routes/+page.svelte -- stats-grid-wide row and the <Chart height={400}> call- Possibly
src/lib/components/Chart.svelte if the chart itself needs a responsive-height option
Out of scope
- The resource data itself (CPU/RAM/SSD used-vs-total,
formatAsciiBar/computeUtilizationPercent) -- this is a layout/visual change only, not a data change.
Next step
Mock up 2-3 concrete layout treatments (matching real card widths/breakpoints) and get sign-off on one before implementing, per the pattern used for #127's header ASCII redesign -- a layout change like this is easy to get subtly wrong without seeing it against real content first.
Problem
Two related layout issues in the "Additional Metrics" row and the chart beneath it:
1. Busiest Node card wastes horizontal space
BusiestNodeCard.svelte's.node-resourcesblock (lines ~46-62) stacks CPU, RAM and SSD asthree full-width rows, each with its own heading line, a full-width horizontal ASCII bar
(
formatAsciiBar()), and a detail line -- 3 lines x 3 resources = 9 lines of vertical space,on a card that's otherwise fairly narrow. The card's identity line and app-name pill list have
to compete with that for room, and the pill list is already capped at
max-height: 6.5remwithits own scrollbar.
Reorienting CPU/RAM/SSD to sit side-by-side (three columns) instead of stacked rows would use
the card's width -- which the current layout leaves mostly idle -- to free up vertical space
for the identity line and the app list.
2. Historical Performance chart looks small relative to the row above it
+page.svelte's "Additional Metrics" row (stats-grid-wide, ~line 451) holds threeCSS-grid-stretched cards (Total App Instances, Busiest Node, Decentralization) that all match
the tallest one's height -- currently Busiest Node, per point 1 above. The `` right
below it (~line 476) has a hardcoded `height={400}` prop, independent of that row's height.
When the stretched row gets tall, the chart reads as undersized by comparison even though its
absolute height hasn't changed.
Possible directions (not decided -- needs a mockup/sign-off pass before implementing, same as #127)
gauges instead of 3 stacked horizontal bars) so the Additional Metrics row is naturally
shorter, closing the gap with the chart's fixed height.
proportionate regardless of how tall Additional Metrics ends up.
Scope
src/lib/components/BusiestNodeCard.svelte--.node-resources/.resource-rowmarkup + CSSsrc/routes/+page.svelte--stats-grid-widerow and the<Chart height={400}>callsrc/lib/components/Chart.svelteif the chart itself needs a responsive-height optionOut of scope
formatAsciiBar/computeUtilizationPercent) -- this is a layout/visual change only, not a data change.Next step
Mock up 2-3 concrete layout treatments (matching real card widths/breakpoints) and get sign-off on one before implementing, per the pattern used for #127's header ASCII redesign -- a layout change like this is easy to get subtly wrong without seeing it against real content first.