vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: screen fit-to-window — lift flex auto-minimum on the canvas

Browse source 
PR #171 made relayoutCanvas() set canvas.style.width/height
explicitly, but the canvas is a flex item: flex items default to
min-width/min-height: auto, which resolves to the canvas's intrinsic
framebuffer resolution and clamps the JS-set display size right back
up to native — so fit mode still did nothing (#133, "still same
behavior").

Add min-width/min-height: 0 (+ flex: none) on the canvas in fit mode
so the explicit downscaled size actually sticks. Scoped to
#canvas-wrap.fit so non-fit mode keeps native size + scroll.

re #133
This commit is contained in:
iris 2026-05-21 19:40:17 +02:00
parent dd32774e86
commit 4814aaefdb
1 changed files with 8 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
hive-ag3nt/assets/screen.html
View file

@ -61,6 +61,14 @@ html, body { height: 100%; background: var(--base); color: var(--text);
fit the wrap) and clip any sub-pixel rounding overflow. */ fit the wrap) and clip any sub-pixel rounding overflow. */
#canvas-wrap.fit { align-items: center; overflow: hidden; } #canvas-wrap.fit { align-items: center; overflow: hidden; }
canvas { display: block; cursor: default; } canvas { display: block; cursor: default; }
/* In fit mode relayoutCanvas() sets the canvas display size explicitly.
The canvas is a flex item, and flex items default to
min-width/min-height: auto — which resolves to the canvas's intrinsic
framebuffer resolution and clamps the JS-set size straight back up,
defeating the downscale (the bug behind #133 round 1). Pin the canvas
to exactly the size relayoutCanvas() sets: min-* 0 lifts the clamp,
flex: none stops flex grow/shrink from fighting it. */
#canvas-wrap.fit canvas { flex: none; min-width: 0; min-height: 0; }
#msg { #msg {
position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
background: var(--surface0); color: var(--yellow); border-radius: 6px; background: var(--surface0); color: var(--yellow); border-radius: 6px;