fix(layout): hug-size fits content for fill meters (+ network/VRAM clips) (0.0.43)#45
Merged
Conversation
…clips)
"Hug" (basis: 'content') already shrink-wrapped TEXT leaves, but FILL meters
(gauge / sparkline / cpu / GPU panel) were pinned to their authored box and clipped
by the slot's overflow:hidden when content needed more — the GPU "hug clipped" and
VRAM-ellipsis reports.
- flowStyle.ts: content-basis fill meters keep the authored box as the default extent
but FLOOR both axes at min-content, so a hugged meter sits at max(box, its content)
and never clips. Safe because meter fonts are fixed (only AnalogClock is
container-query scaled) → min-content is stable, no measure→grow feedback.
- templates.ts: the Network template box (h:104) is derived from its layout constants
(~150) so it fits the two histograms + rate row and can't drift.
- format.ts/gpu.ts: formatBytesPair shares one unit for the GPU VRAM readout
("12.3 GiB / 16.0 GiB" → "5.6 / 11.2 GiB") so it fits the narrow stat cell.
Verified: type-check, lint, 1317 unit tests, build, and the real-browser e2e (31 passed;
the 1 flake is a pre-existing QuickJS-WASM timing test, unrelated — added widgets use fr
basis, not content). Visual confirmation of the live GPU/network widgets is Windows-only.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Widgets clipped at "hug" (fit-content) size: the Network template, the GPU panel, and GPU VRAM text (ellipsized).
"Hug" (
basis: 'content') already shrink-wrapped text leaves, but fill meters (gauge / sparkline / cpu / GPU panel) were pinned to their authored box and clipped by the slot'soverflow:hiddenwhenever their content needed more.Fix (three layers)
flowStyle.ts: acontent-basis fill meter keeps its authored box as the default extent but floors both axes atmin-content, so a hugged meter sits at max(box, its content) and never clips. Safe because meter fonts are fixed (only AnalogClock is container-query scaled) →min-contentis stable, no measure→grow feedback. Text leaves were already correct; this extends correct hug to fill meters.templates.ts: boxh:104→ derivedNETWORK_H(~150) from the layout constants (two 60px histograms + margins + rate row), so it fits and can't drift.format.ts/gpu.ts:formatBytesPairshares one unit ("12.3 GiB / 16.0 GiB"→"5.6 / 11.2 GiB") so the value fits the narrow stat cell.Verification
contentbasis, while added widgets usefr).🤖 Generated with Claude Code