From 6e1716c1adf2c56d7e92b7a34fb24e40bf0777a3 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 19 Oct 2023 12:32:06 +0100
Subject: [PATCH] feat: iframe resizer

---
 apps/cowswap-frontend/src/cow-react/index.tsx |  4 +++
 .../src/legacy/theme/baseTheme.tsx            |  6 ----
 .../src/utils/iframeResizer.ts                | 29 +++++++++++++++++++
 3 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 apps/cowswap-frontend/src/utils/iframeResizer.ts

diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx
index eb78e960c7..721fafd93f 100644
--- a/apps/cowswap-frontend/src/cow-react/index.tsx
+++ b/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>
 )
 
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index 07c0278f24..c4fe1f9219 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/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});
diff --git a/apps/cowswap-frontend/src/utils/iframeResizer.ts b/apps/cowswap-frontend/src/utils/iframeResizer.ts
new file mode 100644
index 0000000000..571103f1be
--- /dev/null
+++ b/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;
+}
\ No newline at end of file