prevent css distorting preview sizes

css/style.css

@@ -763,11 +763,9 @@ input[type="file"]::file-selector-button {
   /* background: var(--primary-container); */
   margin: var(--space-2) var(--space-4) var(--space-2) 0;
   max-width: 100%;
-  /* Small (e.g. 16x16/32x32) glyphs were rendering at native size, i.e. as
-     an illegible postage stamp. Enforce a minimum on-screen size and keep
-     pixel edges crisp when the browser scales the canvas up. */
-  min-width: 96px;
-  min-height: 96px;
+  /* Display width/height/aspect-ratio are set in JS (setCanvasDisplaySize)
+     so small glyphs get enlarged without distorting their aspect ratio;
+     independent min-width/min-height here would stretch non-square canvases. */
   image-rendering: crisp-edges;
   image-rendering: pixelated;
 }

js/script.js

@@ -259,6 +259,19 @@ function invert(canvas, ctx) {
   ctx.putImageData(imageData, 0, 0);
 }
 
+// Size the on-screen canvas so tiny glyphs stay legible without distorting
+// their aspect ratio (independent min-width/min-height would stretch them).
+function setCanvasDisplaySize(canvas) {
+  const minVisibleSize = 96;
+  const scale = Math.max(1, minVisibleSize / Math.min(canvas.width, canvas.height));
+  // eslint-disable-next-line no-param-reassign
+  canvas.style.aspectRatio = `${canvas.width} / ${canvas.height}`;
+  // eslint-disable-next-line no-param-reassign
+  canvas.style.width = `${Math.round(canvas.width * scale)}px`;
+  // eslint-disable-next-line no-param-reassign
+  canvas.style.height = 'auto';
+}
+
 // Draw the image onto the canvas, taking into account color and scaling
 function placeImage(_image) {
   const { img } = _image;
@@ -439,6 +452,8 @@ function placeImage(_image) {
     ctx.drawImage(clone, 0, 0);
     ctx.setTransform(1, 0, 0, 1, 0, 0);
   }
+
+  setCanvasDisplaySize(canvas);
 }
 
 // Handle drawing each of our images