feat: iframe resizer

apps/cowswap-frontend/src/cow-react/index.tsx

@@ -30,9 +30,11 @@ import { WithLDProvider } from 'modules/application/containers/WithLDProvider'
 import { FortuneWidget } from 'modules/fortune/containers/FortuneWidget'
 
 import { FeatureGuard } from 'common/containers/FeatureGuard'
+import { IframeResizer } from 'utils/iframeResizer'
 
 import { WalletUnsupportedNetworkBanner } from '../common/containers/WalletUnsupportedNetworkBanner'
 
+
 // Node removeChild hackaround
 // based on: https://github.com/facebook/react/issues/11538#issuecomment-417504600
 nodeRemoveChildFix()
@@ -79,6 +81,8 @@ root.render(
         </HashRouter>
       </AtomProvider>
     </Provider>
+
+    {isInjectedWidgetMode && <IframeResizer />}
   </StrictMode>
 )
 

apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx

@@ -504,12 +504,6 @@ export const ThemedGlobalStyle = createGlobalStyle`
     }
   }
 
-  /* body > #root {
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-color: ${({ theme }) => theme.darkMode? 'dark' : 'light'}; // Firefox only
-  } */
-
   ::selection {
     background: var(${UI.COLOR_CONTAINER_BG_02});
     color: var(${UI.COLOR_WHITE});

apps/cowswap-frontend/src/utils/iframeResizer.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+export function IframeResizer() {
+  useEffect(() => {
+    // Initial height calculation and message
+    const sendHeightUpdate = () => {
+        const contentHeight = document.body.scrollHeight;
+        window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*');
+    };
+    sendHeightUpdate();
+
+    // Set up a MutationObserver to watch for changes in the DOM
+    const observer = new MutationObserver(() => {
+        // For simplicity, we'll send an update for any mutation, but you can add more specific checks if needed
+        sendHeightUpdate();
+    });
+
+    // Start observing the entire body and its descendants for changes to the structure of the DOM
+    observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+
+    // Cleanup: Disconnect the observer when the component is unmounted
+    return () => {
+      observer.disconnect();
+    };
+
+  }, []);
+
+  return null;
+}