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) => {