From 99f411660944e9d1dc6c120a9f81ee9597016d4f Mon Sep 17 00:00:00 2001
From: Gabriel Le Breton <lebreton.gabriel@gmail.com>
Date: Fri, 19 Dec 2025 09:12:15 -0500
Subject: [PATCH 1/2] style(sponsors-section): Improve responsive design of
 sponsors iframe

- Add `className="w-full max-w-7xl"` to FadeIntoView wrapper for proper width constraints
- Replace fixed `height` and `width` attributes with responsive Tailwind classes
- Implement breakpoint-based height scaling: 1200px (mobile), 1000px (sm), 900px (md), 750px (lg), 667px (xl)
- Set iframe to full width for better mobile experience
- Improves layout consistency across different screen sizes and devices
---
 src/components/pages/home/section/sponsors-section.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/home/section/sponsors-section.tsx b/src/components/pages/home/section/sponsors-section.tsx
index 1975c404..032eacb1 100644
--- a/src/components/pages/home/section/sponsors-section.tsx
+++ b/src/components/pages/home/section/sponsors-section.tsx
@@ -6,11 +6,10 @@ const SponsorsSection = () => {
   return (
     // Would be nice if the banner had a dark mode that we could use for `dark:*`
     <Section title="Sponsors" className="bg-white dark:bg-white">
-      <FadeIntoView>
+      <FadeIntoView className="w-full max-w-7xl">
         <iframe
           title="Game CI Sponsors"
-          height="667"
-          width="800"
+          className="w-full h-[1200px] sm:h-[1000px] md:h-[900px] lg:h-[750px] xl:h-[667px]"
           src="https://opencollective.com/game-ci/banner.html"
           frameBorder="0"
           scrolling="no"

From 9bac9cdd2822f48b3e9bcb7a408b0a0b4f41427c Mon Sep 17 00:00:00 2001
From: Gabriel Le Breton <lebreton.gabriel@gmail.com>
Date: Fri, 19 Dec 2025 10:39:46 -0500
Subject: [PATCH 2/2] feat(sponsors-section): Add dynamic iframe height
 adjustment with postMessage

- Add useEffect hook to listen for postMessage events from OpenCollective
- Implement dynamic height state that updates based on iframe content changes
- Parse OpenCollective's "oc-" prefixed message format to extract height data
- Add 10px buffer to calculated height to prevent scrollbars
- Replace responsive Tailwind height classes with dynamic inline styles
- Wrap iframe in container div with overflow-hidden for better containment
- Add comprehensive JSDoc comment explaining iframe behavior and fallback mechanism
- Validate message origin to only accept events from https://opencollective.com
- Add error handling for JSON parsing failures with silent fallback
- Improve accessibility and user experience by eliminating layout shifts
---
 .../pages/home/section/sponsors-section.tsx   | 64 ++++++++++++++++---
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/home/section/sponsors-section.tsx b/src/components/pages/home/section/sponsors-section.tsx
index 032eacb1..a77439c0 100644
--- a/src/components/pages/home/section/sponsors-section.tsx
+++ b/src/components/pages/home/section/sponsors-section.tsx
@@ -1,19 +1,67 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view';
 import Section from '@site/src/components/pages/home/section/section';
 
+/**
+ * SponsorsSection displays the OpenCollective sponsors iframe with dynamic height.
+ *
+ * The iframe automatically resizes based on postMessage events from OpenCollective,
+ * which sends height updates as the content changes (e.g., when sponsor count changes).
+ * Falls back to 1200px if no message is received.
+ */
 const SponsorsSection = () => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  // Start with a generous fallback height that works for most sponsor counts
+  const [iframeHeight, setIframeHeight] = useState<number>(1200);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Only accept messages from OpenCollective
+      if (event.origin !== 'https://opencollective.com') return;
+
+      try {
+        // OpenCollective sends data as a string prefixed with "oc-"
+        const { data } = event;
+        let parsedData = data;
+
+        if (typeof data === 'string' && data.startsWith('oc-')) {
+          parsedData = JSON.parse(data.slice(3)); // Remove "oc-" prefix and parse JSON
+        }
+
+        // Extract height from the parsed data
+        const height = parsedData?.height || parsedData?.frameHeight;
+
+        if (height && typeof height === 'number' && height > 0) {
+          // Add a small buffer to prevent scrollbars
+          setIframeHeight(Math.ceil(height) + 10);
+        }
+      } catch {
+        // Silently ignore parsing errors
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // Cleanup listener on unmount
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
   return (
     // Would be nice if the banner had a dark mode that we could use for `dark:*`
     <Section title="Sponsors" className="bg-white dark:bg-white">
       <FadeIntoView className="w-full max-w-7xl">
-        <iframe
-          title="Game CI Sponsors"
-          className="w-full h-[1200px] sm:h-[1000px] md:h-[900px] lg:h-[750px] xl:h-[667px]"
-          src="https://opencollective.com/game-ci/banner.html"
-          frameBorder="0"
-          scrolling="no"
-        />
+        <div className="w-full overflow-hidden">
+          <iframe
+            ref={iframeRef}
+            title="Game CI Sponsors"
+            className="w-full border-0"
+            style={{ height: `${iframeHeight}px`, maxWidth: '100%', overflow: 'hidden' }}
+            src="https://opencollective.com/game-ci/banner.html"
+            scrolling="no"
+          />
+        </div>
       </FadeIntoView>
     </Section>
   );