Fix copy menu positioning

Author: josh-collinsworth

_components/CopyPage.tsx

@@ -57,7 +57,7 @@ export default function CopyPage({ file }: { file: string | undefined }) {
         </svg>
       </button>
 
-      {/* Popover panel — lives in top layer, positioned via JS */}
+      {/* Popover panel — positioned via CSS anchor positioning, JS fallback */}
       <div id="copy-page-menu" popover="auto" class="copy-page-panel">
         <a
           href={file}

js/copy-page.ts

@@ -2,7 +2,7 @@
 document.querySelectorAll<HTMLButtonElement>(".copy-page-main-btn").forEach(
   (btn) => {
     btn.addEventListener("click", () => {
-      navigator?.clipboard?.writeText(window.location.href).then(() => {
+      navigator?.clipboard?.writeText(globalThis.location.href).then(() => {
         const label = btn.querySelector<HTMLElement>(".copy-page-main-label");
         if (label) {
           const original = label.textContent;
@@ -31,14 +31,43 @@ const toggleBtn = document.querySelector<HTMLButtonElement>(
   ".copy-page-toggle-btn",
 );
 
+const supportsAnchor = CSS.supports("anchor-name", "--a");
+
+if (!supportsAnchor && panel) {
+  panel.style.setProperty("position-anchor", "unset");
+  panel.style.setProperty("position-area", "unset");
+  panel.style.setProperty("position-try-fallbacks", "none");
+}
+
 panel?.addEventListener("toggle", (event) => {
   const e = event as ToggleEvent;
   const chevron = toggleBtn?.querySelector<SVGElement>(".copy-page-chevron");
 
-  if (e.newState === "open" && toggleBtn) {
-    const rect = toggleBtn.getBoundingClientRect();
-    panel.style.top = `${rect.bottom + 4}px`;
-    panel.style.right = `${window.innerWidth - rect.right}px`;
+  const splitBtn = toggleBtn?.closest<HTMLElement>(".copy-page-split");
+  if (e.newState === "open" && splitBtn && toggleBtn) {
+    // Only position via JS when CSS anchor positioning isn't supported
+    if (!supportsAnchor) {
+      // Use requestAnimationFrame to ensure the panel is rendered before measuring
+      requestAnimationFrame(() => {
+        // Use toggleBtn for vertical position (splitBtn may include popover in measurement)
+        // Use splitBtn for horizontal alignment (left edge of whole button)
+        const btnRect = toggleBtn.getBoundingClientRect();
+        const splitRect = splitBtn.getBoundingClientRect();
+        const panelWidth = panel.offsetWidth;
+
+        const top = btnRect.bottom + 4;
+        let right = globalThis.innerWidth - splitRect.right;
+
+        // Clamp so the panel doesn't overflow the left edge
+        const left = globalThis.innerWidth - right - panelWidth;
+        if (left < 8) {
+          right = globalThis.innerWidth - panelWidth - 8;
+        }
+
+        panel.style.top = `${top}px`;
+        panel.style.right = `${right}px`;
+      });
+    }
   }
   if (chevron) {
     chevron.style.transform = e.newState === "open" ? "rotate(180deg)" : "";

style.css

@@ -1227,13 +1227,23 @@
     }
   }
 
+  .copy-page-split {
+    anchor-name: --copy-page-anchor;
+  }
+
   .copy-page-panel {
     /* Reset browser popover defaults */
     inset: unset;
     margin: 0;
     padding: 0;
     @apply w-72 rounded-md overflow-hidden bg-white dark:bg-gray-900 border
       border-foreground-tertiary shadow-lg;
+
+    /* CSS anchor positioning (supported browsers) */
+    position-anchor: --copy-page-anchor;
+    position-area: bottom span-left;
+    margin-top: 4px;
+    position-try-fallbacks: flip-inline;
   }
 
   #feedback-no:focus + label,