From 6f3e4c8aa09681e115ca8e433423c9ba34e86db9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Apr 2026 17:05:11 +0000
Subject: [PATCH] Fix editor canvas not rendering: layout and resize fixes

- Canvas uses flex:1 and align-self:stretch to fill remaining space
- edResize uses getBoundingClientRect for reliable width measurement
- Use double requestAnimationFrame instead of setTimeout for layout settling
- Minimum canvas height of 200px as fallback

https://claude.ai/code/session_01TFVkxq4PYhkSFGYHEi4uqY
---
 index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index ae2bb79..96f9740 100644
--- a/index.html
+++ b/index.html
@@ -229,7 +229,7 @@ canvas{display:block;}
       <span id="ed-import-status" style="color:#888;font-size:11px;"></span>
     </div>
   </div>
-  <canvas id="ed-canvas" style="display:block;width:100%;cursor:crosshair;"></canvas>
+  <canvas id="ed-canvas" style="display:block;width:100%;flex:1;cursor:crosshair;align-self:stretch;"></canvas>
 </div>
 
 <script>
@@ -4844,16 +4844,17 @@ function openEditor(){
   document.getElementById("ed-code-panel").style.display="none";
   document.getElementById("ed-import-panel").style.display="none";
   show("sed");
-  setTimeout(edResize,50);
+  // Need multiple frames for flex layout to settle after display:none→flex
+  requestAnimationFrame(function(){requestAnimationFrame(function(){edResize();});});
 }
 function closeEditor(){stopPreview();edPreviewing=false;document.getElementById("ed-pv-btn").textContent="▶ Preview";show("sm");}
 
 function edResize(){
   var cv=getEdCanvas();
-  var rect=cv.parentElement.getBoundingClientRect();
-  var toolH=document.getElementById("ed-toolbar").offsetHeight+document.getElementById("ed-help").offsetHeight;
-  cv.width=rect.width;
-  cv.height=window.innerHeight-toolH-cv.getBoundingClientRect().top+window.scrollY;
+  var cvRect=cv.getBoundingClientRect();
+  cv.width=cvRect.width||cv.parentElement.clientWidth||window.innerWidth;
+  // Height = remaining space from canvas top to window bottom
+  cv.height=Math.max(200, window.innerHeight-cvRect.top);
   ED_LANE_H=Math.floor((cv.height-ED_KICK_H)/4);
   edDraw();
 }