From d8baa03389851eb1a71311e74530f0e7f5499d55 Mon Sep 17 00:00:00 2001 From: PavelMakarchuk Date: Tue, 17 Feb 2026 16:10:06 -0500 Subject: [PATCH] Resize model page iframe dynamically via postMessage Listens for height messages from the embedded policyengine-model app and resizes the iframe to match content, so the footer only appears when scrolling to the bottom. Closes #697 Co-Authored-By: Claude Opus 4.6 --- app/src/pages/Model.page.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/app/src/pages/Model.page.tsx b/app/src/pages/Model.page.tsx index 4cec03a7f..86dd72ec2 100644 --- a/app/src/pages/Model.page.tsx +++ b/app/src/pages/Model.page.tsx @@ -1,12 +1,29 @@ /** * Embeds the PolicyEngine Model overview from Vercel. * Inherits policyengine.org header/footer via StaticLayout. + * + * The embedded app posts its content height via postMessage so the + * iframe can grow to fit, letting the parent page scroll naturally + * with the footer only visible at the very bottom. */ +import { useCallback, useEffect, useState } from 'react'; import { useCurrentCountry } from '@/hooks/useCurrentCountry'; export default function ModelPage() { const countryId = useCurrentCountry(); const embedUrl = `https://policyengine-model.vercel.app?embed&country=${countryId}`; + const [height, setHeight] = useState(null); + + const handleMessage = useCallback((event: MessageEvent) => { + if (event.data?.type === 'policyengine-model-height') { + setHeight(event.data.height); + } + }, []); + + useEffect(() => { + window.addEventListener('message', handleMessage); + return () => window.removeEventListener('message', handleMessage); + }, [handleMessage]); return (