From 4814aaefdbb97b9bb0b0e07a5b380c613b621ea3 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Thu, 21 May 2026 19:40:17 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20screen=20fit-to-window=20=E2=80=94=20lif?=
 =?UTF-8?q?t=20flex=20auto-minimum=20on=20the=20canvas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 hive-ag3nt/assets/screen.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/hive-ag3nt/assets/screen.html b/hive-ag3nt/assets/screen.html
index 44f50d0..9a2f75a 100644
--- a/hive-ag3nt/assets/screen.html
+++ b/hive-ag3nt/assets/screen.html
@@ -61,6 +61,14 @@ html, body { height: 100%; background: var(--base); color: var(--text);
    fit the wrap) and clip any sub-pixel rounding overflow. */
 #canvas-wrap.fit { align-items: center; overflow: hidden; }
 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 {
   position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
   background: var(--surface0); color: var(--yellow); border-radius: 6px;