From 7e4cf8f06bff92b39aba8ccf5b526af723059f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sun, 22 Mar 2026 19:51:02 +0100
Subject: [PATCH] Fix mobile flyout

---
 script.js  |  4 +---
 styles.css | 13 ++++++++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/script.js b/script.js
index d4d6822..3f1b7b3 100644
--- a/script.js
+++ b/script.js
@@ -14,9 +14,7 @@ const positionFlyover = (trigger) => {
   const panelHeight = flyoverPanel.offsetHeight;
 
   if (isMobile) {
-    const maxTop = Math.max(gap, window.innerHeight - panelHeight - gap);
-    const top = Math.min(rect.bottom + gap, maxTop);
-    flyover.style.setProperty("--flyover-top", `${Math.max(gap, top)}px`);
+    flyover.style.removeProperty("--flyover-top");
     flyover.style.removeProperty("--flyover-left");
     return;
   }
diff --git a/styles.css b/styles.css
index 4280185..2eaff3f 100644
--- a/styles.css
+++ b/styles.css
@@ -889,13 +889,16 @@ button {
   }
 
   .contact-flyover__panel {
-    top: var(--flyover-top, auto);
-    right: auto;
-    bottom: 1rem;
+    top: auto;
+    right: 1rem;
+    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
     left: 1rem;
-    width: auto;
-    max-height: calc(100dvh - 2rem);
+    width: calc(100vw - 2rem);
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom, 0px));
     padding: 1.5rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .contact-item {