requests iframe height for better sizing

src/components/mdx/StorybookDemo/StoryBookDemo.module.scss

@@ -8,7 +8,6 @@
   iframe {
     transform: translateY(-20px);
     width: 100%;
-    height: 6000px;
     background-color: transparent;
   }
 }

src/components/mdx/StorybookDemo/StorybookDemo.tsx

@@ -4,6 +4,34 @@ import clsx from 'clsx'
 import React, { useMemo, useRef, useState } from 'react'
 import styles from './StoryBookDemo.module.scss'
 
+const onIframeLoad = (iframe: HTMLIFrameElement) => {
+  const handleIframeMessage = (event: MessageEvent) => {
+    if (event.data && event.data.type === 'iframeHeightResponse') {
+      iframe.style.height = `${event.data.height}px`
+    }
+  }
+
+  // Request height from the iframe
+  const requestHeightFromIframe = () => {
+    if (!iframe || !iframe.contentWindow) {
+      return
+    }
+
+    iframe.contentWindow.postMessage(
+      {
+        type: 'requestHeight',
+      },
+      '*',
+    )
+  }
+
+  window.addEventListener('message', handleIframeMessage)
+
+  setInterval(() => {
+    requestHeightFromIframe()
+  }, 1000)
+}
+
 type GlobalType = {
   name: string
   description: string
@@ -124,7 +152,14 @@ export const StorybookDemo: React.FC<StorybookDemoProps> = ({
         ))}
       </div>
       <div className={styles.iframeContainer}>
-        <iframe ref={iframeRef} src={embedUrl} />
+        <iframe
+          ref={iframeRef}
+          src={embedUrl}
+          height={0}
+          onLoad={() => {
+            onIframeLoad(iframeRef.current)
+          }}
+        />
       </div>
     </div>
   )