@marimo-team/islands 0.21.2-dev71 → 0.21.2-dev72

package/dist/main.js

@@ -55877,7 +55877,7 @@ ${c}
       let c = document.createElement("canvas");
       c.className = "block cursor-crosshair";
       let d = globalThis.devicePixelRatio ?? 1;
-      c.width = __privateGet(this, _n4).width * d, c.height = __privateGet(this, _n4).height * d, c.style.width = `${__privateGet(this, _n4).width}px`, c.style.height = `${__privateGet(this, _n4).height}px`, c.style.maxWidth = "100%", c.style.touchAction = "none", e.append(c), __privateSet(this, _e8, c), c.addEventListener("pointerdown", __privateGet(this, _y), {
+      c.width = __privateGet(this, _n4).width * d, c.height = __privateGet(this, _n4).height * d, c.style.width = `${__privateGet(this, _n4).width}px`, c.style.maxWidth = "100%", c.style.height = "auto", c.style.aspectRatio = `${__privateGet(this, _n4).width} / ${__privateGet(this, _n4).height}`, c.style.touchAction = "none", e.append(c), __privateSet(this, _e8, c), c.addEventListener("pointerdown", __privateGet(this, _y), {
         signal: r.signal
       }), c.addEventListener("pointermove", __privateGet(this, _b2), {
         signal: r.signal
@@ -55895,7 +55895,7 @@ ${c}
       let c = false;
       if (e.width !== r.width || e.height !== r.height) {
         let r2 = globalThis.devicePixelRatio ?? 1;
-        __privateGet(this, _e8).width = e.width * r2, __privateGet(this, _e8).height = e.height * r2, __privateGet(this, _e8).style.width = `${e.width}px`, __privateGet(this, _e8).style.height = `${e.height}px`, c = true;
+        __privateGet(this, _e8).width = e.width * r2, __privateGet(this, _e8).height = e.height * r2, __privateGet(this, _e8).style.width = `${e.width}px`, __privateGet(this, _e8).style.maxWidth = "100%", __privateGet(this, _e8).style.height = "auto", __privateGet(this, _e8).style.aspectRatio = `${e.width} / ${e.height}`, c = true;
       }
       if (e.chartBase64 !== __privateGet(this, _s)) {
         __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, e.chartBase64);
@@ -64766,7 +64766,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev71"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev72"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev71",
+  "version": "0.21.2-dev72",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -301,8 +301,9 @@ export class MatplotlibRenderer {
     canvas.width = this.#state.width * dpr;
     canvas.height = this.#state.height * dpr;
     canvas.style.width = `${this.#state.width}px`;
-    canvas.style.height = `${this.#state.height}px`;
     canvas.style.maxWidth = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`;
     canvas.style.touchAction = "none";
     container.append(canvas);
     this.#canvas = canvas;
@@ -344,7 +345,9 @@ export class MatplotlibRenderer {
       this.#canvas.width = state.width * dpr;
       this.#canvas.height = state.height * dpr;
       this.#canvas.style.width = `${state.width}px`;
-      this.#canvas.style.height = `${state.height}px`;
+      this.#canvas.style.maxWidth = "100%";
+      this.#canvas.style.height = "auto";
+      this.#canvas.style.aspectRatio = `${state.width} / ${state.height}`;
       needsRedraw = true;
     }