fix: scale drakonwidget container to fit parent, center with flexbox

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';
+    // Scale the container to fit the parent (560px canvas -> fit in ~486px container)
-    canvasContainer.style.justifyContent = 'center';
+    var containerWidth = canvasContainer.clientWidth;
-    canvasContainer.style.overflow = 'hidden';
+    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';
   }
 });