From b42ecde4bc3409c7002855dabbf9c861436dd33e Mon Sep 17 00:00:00 2001
From: kristiangjestad <kristiangjestad@icloud.com>
Date: Sat, 2 May 2026 19:41:09 +0200
Subject: [PATCH] fix: prevent MazeMap iframe from capturing scroll events

Adds a transparent overlay over the MazeMap iframe so page scrolling
works normally when passing the map. Clicking the map activates
interaction; pointer leaving the map restores the overlay.
---
 .../_components/MazeMap/MazeMap.module.scss   | 17 +++++++-
 src/app/_components/MazeMap/MazeMap.tsx       | 41 ++++++++++++-------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/app/_components/MazeMap/MazeMap.module.scss b/src/app/_components/MazeMap/MazeMap.module.scss
index 50a9a7d53..5bdc83659 100644
--- a/src/app/_components/MazeMap/MazeMap.module.scss
+++ b/src/app/_components/MazeMap/MazeMap.module.scss
@@ -1,15 +1,28 @@
 @use "@/styles/ohma";
 
-.MazeMap { 
+.MazeMap {
     display: flex;
     justify-content: center;
     filter: invert(1) hue-rotate(180deg);
 }
 
-.MazeMapIframe {
+.MazeMapWrapper {
+    position: relative;
     width: 80%;
     height: 100%;
+}
+
+.MazeMapIframe {
+    width: 100%;
+    height: 100%;
     border: none;
     border-radius: ohma.$rounding;
     background-color: white;
 }
+
+.MazeMapOverlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    cursor: pointer;
+}
diff --git a/src/app/_components/MazeMap/MazeMap.tsx b/src/app/_components/MazeMap/MazeMap.tsx
index 405c32e9d..cda497768 100644
--- a/src/app/_components/MazeMap/MazeMap.tsx
+++ b/src/app/_components/MazeMap/MazeMap.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import style from './MazeMap.module.scss'
 
 type PropTypes = {
@@ -25,21 +26,31 @@ export default function MazeMap({
     zoom = 18,
     sharePoi = 83, // lophtet <3
 }: PropTypes) {
-    return <div className={style.MazeMap} style={{ height }}>
-        <iframe
-            title="MazeMap"
-            src={
-                'https://use.mazemap.com/embed.html#v=1&' +
-                `campusid=${campusId}&` +
-                `zlevel=${zLevel}&` +
-                `center=${center.x},${center.y}&` +
-                `zoom=${zoom}&` +
-                'sharepoitype=poi&' +
-                `sharepoi=${sharePoi}&` +
-                'utm_medium=iframe'
+    const [active, setActive] = useState(false)
 
-            }
-            className={style.MazeMapIframe}
-        />
+    return <div className={style.MazeMap} style={{ height }}>
+        <div className={style.MazeMapWrapper} onPointerLeave={() => setActive(false)}>
+            <iframe
+                title="MazeMap"
+                src={
+                    'https://use.mazemap.com/embed.html#v=1&' +
+                    `campusid=${campusId}&` +
+                    `zlevel=${zLevel}&` +
+                    `center=${center.x},${center.y}&` +
+                    `zoom=${zoom}&` +
+                    'sharepoitype=poi&' +
+                    `sharepoi=${sharePoi}&` +
+                    'utm_medium=iframe'
+                }
+                className={style.MazeMapIframe}
+            />
+            {!active && (
+                <div
+                    className={style.MazeMapOverlay}
+                    onClick={() => setActive(true)}
+                    title="Klikk for å interagere med kartet"
+                />
+            )}
+        </div>
     </div>
 }