Anchor contact flyout

script.js

@@ -1,10 +1,38 @@
 const flyover = document.querySelector("[data-contact-flyover]");
+const flyoverPanel = document.querySelector(".contact-flyover__panel");
 const openButtons = document.querySelectorAll("[data-open-contact]");
 const closeButtons = document.querySelectorAll("[data-close-contact]");
 const copyButtons = document.querySelectorAll("[data-copy-value]");
+let lastTrigger = null;
 
-const openFlyover = () => {
+const positionFlyover = (trigger) => {
+  if (!flyover || !flyoverPanel || !trigger) return;
+
+  const isMobile = window.innerWidth <= 768;
+  const rect = trigger.getBoundingClientRect();
+  const gap = 16;
+
+  if (isMobile) {
+    const top = Math.min(rect.bottom + gap, window.innerHeight - 320);
+    flyover.style.setProperty("--flyover-top", `${Math.max(gap, top)}px`);
+    flyover.style.removeProperty("--flyover-left");
+    return;
+  }
+
+  const panelWidth = Math.min(420, window.innerWidth - 32);
+  const preferredLeft = rect.right + gap;
+  const maxLeft = window.innerWidth - panelWidth - gap;
+  const left = Math.min(preferredLeft, maxLeft);
+  const top = Math.max(gap, rect.top - 10);
+
+  flyover.style.setProperty("--flyover-left", `${left}px`);
+  flyover.style.setProperty("--flyover-top", `${top}px`);
+};
+
+const openFlyover = (trigger) => {
   if (!flyover) return;
+  lastTrigger = trigger ?? null;
+  positionFlyover(trigger);
   flyover.hidden = false;
   document.body.classList.add("is-scroll-locked");
 };
@@ -16,7 +44,7 @@ const closeFlyover = () => {
 };
 
 openButtons.forEach((button) => {
-  button.addEventListener("click", openFlyover);
+  button.addEventListener("click", () => openFlyover(button));
 });
 
 closeButtons.forEach((button) => {
@@ -29,6 +57,12 @@ document.addEventListener("keydown", (event) => {
   }
 });
 
+window.addEventListener("resize", () => {
+  if (flyover && !flyover.hidden && lastTrigger) {
+    positionFlyover(lastTrigger);
+  }
+});
+
 copyButtons.forEach((button) => {
   button.addEventListener("click", async () => {
     const value = button.dataset.copyValue;

styles.css

@@ -475,8 +475,8 @@ button {
 
 .contact-flyover__panel {
   position: absolute;
-  top: 2rem;
+  top: var(--flyover-top, 2rem);
-  right: max(2rem, calc((100vw - var(--max-width)) / 2 + 2rem));
+  left: var(--flyover-left, auto);
   width: min(420px, calc(100vw - 2rem));
   padding: 2rem;
   border-radius: var(--radius-panel);
@@ -694,8 +694,8 @@ button {
   }
 
   .contact-flyover__panel {
-    top: auto;
+    top: var(--flyover-top, auto);
-    right: 1rem;
+    right: auto;
     bottom: 1rem;
     left: 1rem;
     width: auto;