Fix height not scaling on fixed size sketches

Author: davepagurek

src/components/ScalingIframe/index.tsx

@@ -28,7 +28,13 @@ export const ScalingIframe = ({
     <iframe
       width={width}
       {...props}
-      style={{ transform: `scale(${scale.toFixed(4)})`, transformOrigin: 'top left' }}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transform: `scale(${scale.toFixed(4)})`,
+        transformOrigin: "top left",
+      }}
       ref={iframeRef}
     />
   );

src/layouts/SketchLayout.astro

@@ -64,31 +64,29 @@ const iframeTitle = `OpenProcessing Sketch: ${sketchInfo.title} by ${authorName}
   topic={"community"}
 >
   <div class="max-w-[767px]">
-    {width ? (
-      <div style={{ width: '100%', height: `${(heightOverWidth * 100).toFixed(4)}%`, overflow: 'hidden' }}>
+    <div style={{
+      position: 'relative',
+      width: '100%',
+      paddingBottom: `${(heightOverWidth * 100).toFixed(4)}%`,
+    }}>
+      {width ? (
         <ScalingIframe
           client:load
           src={makeSketchEmbedUrl(sketchInfo.visualID)}
           width={width}
           height={height}
           title={iframeTitle}
         />
-      </div>
-    ) : (
-      <div style={{
-        position: 'relative',
-        width: '100%',
-        paddingBottom: `${(heightOverWidth * 100).toFixed(4)}%`,
-      }}>
+      ) : (
         <iframe
           src={makeSketchEmbedUrl(sketchInfo.visualID)}
           width="100%"
           height="100%"
           style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
           title={iframeTitle}
         />
-      </div>
-    )}
+      )}
+    </div>
     <div class="py-md grid gap-y-sm md:gap-y-md">
       <LinkButton
         variant="code"