From 98fee5677d17be44d64c58318a722c809195313d Mon Sep 17 00:00:00 2001
From: neo <neo@example.com>
Date: Tue, 23 Jun 2026 18:34:27 +0500
Subject: [PATCH] fix: render drakonwidget at 480x360 to fit container properly

---
 index.html | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 1674850..4375f72 100644
--- a/index.html
+++ b/index.html
@@ -879,6 +879,12 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 
 #drakon-canvas > div {
   transform-origin: center center;
+  overflow: visible;
+}
+
+#drakon-canvas > div > canvas {
+  max-width: 100%;
+  max-height: 100%;
 }
 
 #drakon-canvas canvas {
@@ -1325,13 +1331,12 @@ window.addEventListener('load', function() {
   var canvasContainer = document.getElementById('drakon-canvas');
   var widget = createDrakonWidget();
 
-  // Set up canvas with explicit dimensions
-  // width/height define the diagram coordinate system
-  widget.render(560, 420, {
+  // Set up canvas with explicit dimensions matching container (480x360 fits in ~486px container)
+  widget.render(480, 360, {
     startEditContent: function() { /* read-only — no edit */ },
     showContextMenu: function() { /* read-only */ },
     canSelect: false,
-    maxWidth: 560,
+    maxWidth: 480,
     theme: drakonTheme
   });
 
@@ -1342,14 +1347,15 @@ window.addEventListener('load', function() {
   if (widget.container) {
     canvasContainer.appendChild(widget.container);
     
-    // Scale the container to fit the parent (560px canvas -> fit in ~486px container)
+    // Scale the container to fit the parent (480px canvas -> fit in ~486px container)
     var containerWidth = canvasContainer.clientWidth;
-    var scaleX = containerWidth / 560;
-    var scaleY = (containerWidth / 560) * (420 / 400);
-    widget.container.style.transform = 'scale(' + scaleX + ')';
-    widget.container.style.transformOrigin = 'center center';
-    widget.container.style.width = (560 * scaleX) + 'px';
-    widget.container.style.height = (420 * scaleX) + 'px';
+    var scaleX = containerWidth / 480;
+    widget.container.style.position = 'relative';
+    widget.container.style.left = '50%';
+    widget.container.style.transform = 'translateX(-50%) scale(' + scaleX + ')';
+    widget.container.style.width = (480 * scaleX) + 'px';
+    widget.container.style.height = (360 * scaleX) + 'px';
+    widget.container.style.overflow = 'visible';
   }
 });