Match contact flyover behavior

script.js

@@ -3,10 +3,12 @@ const flyoverPanel = document.querySelector(".contact-flyover__panel");
 const openButtons = document.querySelectorAll("[data-open-contact]");
 const closeButtons = document.querySelectorAll("[data-close-contact]");
 const privacyFlyover = document.querySelector("[data-privacy-flyover]");
+const privacyFlyoverPanel = document.querySelector(".privacy-flyover__panel");
 const openPrivacyButtons = document.querySelectorAll("[data-open-privacy]");
 const closePrivacyButtons = document.querySelectorAll("[data-close-privacy]");
 const copyButtons = document.querySelectorAll("[data-copy-value]");
 let lastTrigger = null;
+let lastPrivacyTrigger = null;
 
 const positionFlyover = (trigger) => {
   if (!flyover || !flyoverPanel || !trigger) return;
@@ -41,6 +43,31 @@ const openFlyover = (trigger) => {
   document.body.classList.add("is-scroll-locked");
 };
 
+const positionPrivacyFlyover = (trigger) => {
+  if (!privacyFlyover || !privacyFlyoverPanel || !trigger) return;
+
+  const isMobile = window.innerWidth <= 768;
+  const rect = trigger.getBoundingClientRect();
+  const gap = 16;
+  const panelHeight = privacyFlyoverPanel.offsetHeight;
+
+  if (isMobile) {
+    privacyFlyover.style.removeProperty("--privacy-flyover-top");
+    privacyFlyover.style.removeProperty("--privacy-flyover-left");
+    return;
+  }
+
+  const panelWidth = Math.min(680, window.innerWidth - 32);
+  const preferredLeft = rect.right + gap;
+  const maxLeft = window.innerWidth - panelWidth - gap;
+  const left = Math.min(preferredLeft, maxLeft);
+  const maxTop = Math.max(gap, window.innerHeight - panelHeight - gap);
+  const top = Math.min(Math.max(gap, rect.top - 10), maxTop);
+
+  privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
+  privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
+};
+
 const closeFlyover = () => {
   if (!flyover) return;
   flyover.hidden = true;
@@ -49,9 +76,11 @@ const closeFlyover = () => {
   }
 };
 
-const openPrivacyFlyover = () => {
+const openPrivacyFlyover = (trigger) => {
   if (!privacyFlyover) return;
+  lastPrivacyTrigger = trigger ?? null;
   privacyFlyover.hidden = false;
+  positionPrivacyFlyover(trigger);
   document.body.classList.add("is-scroll-locked");
 };
 
@@ -72,7 +101,7 @@ closeButtons.forEach((button) => {
 });
 
 openPrivacyButtons.forEach((button) => {
-  button.addEventListener("click", openPrivacyFlyover);
+  button.addEventListener("click", () => openPrivacyFlyover(button));
 });
 
 closePrivacyButtons.forEach((button) => {
@@ -93,6 +122,10 @@ window.addEventListener("resize", () => {
   if (flyover && !flyover.hidden && lastTrigger) {
     positionFlyover(lastTrigger);
   }
+
+  if (privacyFlyover && !privacyFlyover.hidden && lastPrivacyTrigger) {
+    positionPrivacyFlyover(lastPrivacyTrigger);
+  }
 });
 
 copyButtons.forEach((button) => {

styles.css

@@ -728,10 +728,6 @@ button {
   position: fixed;
   inset: 0;
   z-index: 21;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
   overflow-y: auto;
   overscroll-behavior: contain;
 }
@@ -744,7 +740,9 @@ button {
 }
 
 .privacy-flyover__panel {
-  position: relative;
+  position: absolute;
+  top: var(--privacy-flyover-top, 2rem);
+  left: var(--privacy-flyover-left, auto);
   width: min(680px, calc(100vw - 2rem));
   max-height: calc(100vh - 2rem);
   overflow-x: hidden;
@@ -1095,17 +1093,16 @@ button {
   }
 
   .privacy-flyover {
-    display: block;
     padding: 0;
   }
 
   .privacy-flyover__panel {
-    position: absolute;
+    top: auto;
     right: 1.25rem;
     bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
     left: 1.25rem;
-    width: auto;
-    max-width: none;
+    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;
     padding: 1.2rem;