enable scrolling locally, but keep disabled in iframe

.travis.yml

@@ -0,0 +1,13 @@
+dist: focal
+language: node_js
+node_js:
+  - v20.13.1
+cache:
+  directories:
+    - node_modules
+before_install:
+  - npm i -g [email protected]
+install:
+  - npm install
+script:
+  - npm run build

components/iframeCommunication.js

@@ -52,6 +52,7 @@ const IframeCommunication = () => {
             }, 50);
         }
     };
+
 
     useEffect(() => {
         // Send initial page height and path

pages/_app.js

@@ -1,7 +1,21 @@
-import '../styles.css'
+import { useEffect } from 'react';
+import '../styles.css';
 import IframeCommunication from '../components/iframeCommunication';
-
-// This default export is required in a new `pages/_app.js` file.
+
 export default function MyApp({ Component, pageProps }) {
-  return <><IframeCommunication /><Component {...pageProps} /></>;
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (window.self !== window.top) {
+      document.body.classList.add("in-iframe");
+    } else {
+      document.body.classList.remove("in-iframe");
+    }
+  }, []);
+
+  return (
+    <>
+      <IframeCommunication />
+      <Component {...pageProps} />
+    </>
+  );
 }

styles.css

@@ -1,5 +1,43 @@
+html, body {
+    height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+}
+
 body {
     font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
     'Arial', sans-serif;
     overflow-y: hidden;
-}
+}
+
+body:not(.in-iframe) {
+    overflow-y: auto;
+}
+
+.main-content {
+    flex: 1;
+    height: 100%;
+    max-height: 100vh;
+    overflow-y: auto; /* Zorgt ervoor dat de inhoud in de iframe kan scrollen */
+    padding: 20px;
+    background: white;
+}
+
+iframe {
+    width: 100%;
+    height: 100vh !important; /* Zorgt dat de iframe altijd de volle hoogte krijgt */
+    overflow-y: auto !important; /* Voorkomt dat de iframe-inhoud wordt afgesneden */
+    border: none;
+}
+
+body.in-iframe {
+    overflow-y: auto !important;
+    height: auto !important;
+    max-height: 100vh !important;
+}
+
+body.in-iframe .main-content {
+    overflow-y: auto !important;
+    height: auto !important;
+    max-height: 100vh !important;
+}