resolving conflict

components/iframeCommunication.js

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 
+const HEIGHT_DIFFERENCE_THRESHOLD = 130; // ~30 locally and 122 on Sandbox (Donna PC)
+
 const allowedOrigins = ['https://alkem.io', 'https://dev-alkem.io', 'https://acc-alkem.io', 'https://sandbox-alkem.io', 'http://localhost:3000'];
 const isOriginValid = (origin) => allowedOrigins.includes(origin);
 
@@ -40,24 +42,25 @@ const IframeCommunication = () => {
 
     const sendPageHeight = () => {
         const pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+        console.log('Scroll change new/old: ', pageHeight, lastHeight.current);
 
         // Only send if there's a meaningful difference in height
-        if (Math.abs(pageHeight - lastHeight.current) > 40) {
+        if (Math.abs(pageHeight - lastHeight.current) > HEIGHT_DIFFERENCE_THRESHOLD) {
             lastHeight.current = pageHeight;
 
             // Debounce the message to avoid excessive calls
             clearTimeout(debounceTimeout.current);
             debounceTimeout.current = setTimeout(() => {
+                console.log('Scroll change SENT: ', pageHeight, lastHeight.current);
                 sendMessageToParent({ type: SupportedMessageTypes.PageHeight, height: pageHeight });
             }, 50);
         }
     };
 
 
     useEffect(() => {
-        // Send initial page height and path
+        // Send path
         sendMessageToParent({ type: SupportedMessageTypes.PageChange, url: router.pathname });
-        sendPageHeight();
 
         // Observe changes to the body size
         const resizeObserver = new ResizeObserver(sendPageHeight);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkemio/documentation",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Alkemio platform documentation",
   "author": "Alkemio Foundation",
   "repository": {

pages/_app.js

@@ -4,12 +4,11 @@ import IframeCommunication from '../components/iframeCommunication';
 
 export default function MyApp({ 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");
-    }
+    try {
+      if (window.self === window.top) {
+        document.body.classList.add("not-in-iframe");
+      }
+    } catch (e) {}
   }, []);
 
   return (

styles.css

@@ -1,43 +1,11 @@
-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) {
+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;
-}