From c60a9bd8616b3ce0cc5787d868411ff3e5858ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 25 Mar 2026 17:12:50 +0100
Subject: [PATCH] Place mobile modal above button

---
 script.js  | 10 ++++++++--
 styles.css | 14 ++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/script.js b/script.js
index a204020..c2b4d66 100644
--- a/script.js
+++ b/script.js
@@ -52,8 +52,13 @@ const positionPrivacyFlyover = (trigger) => {
   const panelHeight = privacyFlyoverPanel.offsetHeight;
 
   if (isMobile) {
-    privacyFlyover.style.removeProperty("--privacy-flyover-top");
-    privacyFlyover.style.removeProperty("--privacy-flyover-left");
+    const panelWidth = window.innerWidth - 40;
+    const left = 20;
+    const top = Math.max(gap, rect.top - panelHeight - gap);
+
+    privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
+    privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
+    privacyFlyover.style.setProperty("--privacy-flyover-width", `${panelWidth}px`);
     return;
   }
 
@@ -66,6 +71,7 @@ const positionPrivacyFlyover = (trigger) => {
 
   privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
   privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
+  privacyFlyover.style.removeProperty("--privacy-flyover-width");
 };
 
 const closeFlyover = () => {
diff --git a/styles.css b/styles.css
index 60faafd..5ec1a32 100644
--- a/styles.css
+++ b/styles.css
@@ -743,7 +743,7 @@ button {
   position: absolute;
   top: var(--privacy-flyover-top, 2rem);
   left: var(--privacy-flyover-left, auto);
-  width: min(680px, calc(100vw - 2rem));
+  width: var(--privacy-flyover-width, min(680px, calc(100vw - 2rem)));
   max-height: calc(100vh - 2rem);
   overflow-x: hidden;
   overflow-y: auto;
@@ -1092,16 +1092,10 @@ button {
     font-size: 0.95rem;
   }
 
-  .privacy-flyover {
-    padding: 0;
-  }
-
   .privacy-flyover__panel {
-    top: auto;
-    right: 1.25rem;
-    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
-    left: 1.25rem;
-    width: calc(100vw - 2.5rem);
+    right: auto;
+    bottom: auto;
+    width: var(--privacy-flyover-width, calc(100vw - 2.5rem));
     max-width: calc(100vw - 2.5rem);
     max-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom, 0px));
     margin: 0;