Auto-resize model iframe via postMessage

app/src/pages/Model.page.tsx

@@ -1,23 +1,35 @@
 /**
- * Embeds the PolicyEngine Model overview in a simple iframe
- * with a fixed height. The postMessage-based auto-sizing from the
- * child app is intentionally not used to avoid resize loops.
+ * Embeds the PolicyEngine Model overview in an iframe that auto-sizes
+ * to match the child content height via postMessage.
  */
+import { useCallback, useEffect, useState } from 'react';
 import { useCurrentCountry } from '@/hooks/useCurrentCountry';
 
-const HEIGHT = '4000px';
+const MIN_HEIGHT = 4000;
 
 export default function ModelPage() {
   const countryId = useCurrentCountry();
   const embedUrl = `https://policyengine-model.vercel.app/?embed&country=${countryId}`;
+  const [height, setHeight] = useState(MIN_HEIGHT);
+
+  const onMessage = useCallback((e: MessageEvent) => {
+    if (e.data?.type === 'policyengine-model-height' && typeof e.data.height === 'number') {
+      setHeight(Math.max(e.data.height, MIN_HEIGHT));
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [onMessage]);
 
   return (
     <iframe
       src={embedUrl}
       title="Model overview | PolicyEngine"
       style={{
         width: '100%',
-        height: HEIGHT,
+        height: `${height}px`,
         border: 'none',
         display: 'block',
       }}