From 85d47d46b1747684db0ecee95c2e1d4edebbf840 Mon Sep 17 00:00:00 2001
From: neo <neo@example.com>
Date: Tue, 23 Jun 2026 18:19:32 +0500
Subject: [PATCH] fix: scale drakonwidget container to fit parent, center with
 flexbox

---
 index.html | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 544ac37..1674850 100644
--- a/index.html
+++ b/index.html
@@ -871,6 +871,14 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   width: 100%;
   height: 400px;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+#drakon-canvas > div {
+  transform-origin: center center;
 }
 
 #drakon-canvas canvas {
@@ -1333,10 +1341,15 @@ window.addEventListener('load', function() {
   // Append the widget's container (with canvas) to our #drakon-canvas element
   if (widget.container) {
     canvasContainer.appendChild(widget.container);
-    canvasContainer.style.display = 'flex';
-    canvasContainer.style.alignItems = 'center';
-    canvasContainer.style.justifyContent = 'center';
-    canvasContainer.style.overflow = 'hidden';
+    
+    // Scale the container to fit the parent (560px 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';
   }
 });