@m13v/seo-components 0.38.4 → 0.38.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.38.4",
+  "version": "0.38.5",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "lint:mobile-spans": "node scripts/lint-mobile-spans.mjs",

package/src/components/InstallEmailGate.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { trackGetStartedClick } from "../lib/track";
 import { useCapture } from "../lib/analytics-context";
@@ -133,6 +134,15 @@ export function InstallEmailGate({
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
   const [copied, setCopied] = useState<"command" | "config" | null>(null);
+  // Mounted flag so we can portal the modal to document.body on the client
+  // without breaking SSR hydration. The modal escapes any transformed parent
+  // (e.g. .reveal-up) that would otherwise trap position: fixed inside that
+  // ancestor's stacking context, allowing clicks to leak through to the
+  // underlying page.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     if (stage === "closed") return;
@@ -286,28 +296,8 @@ export function InstallEmailGate({
       ? "group inline-flex h-11 items-center gap-2 rounded-md bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-800"
       : "inline-flex items-center justify-center rounded-md border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium text-zinc-800 transition-colors hover:border-zinc-400";
 
-  return (
-    <>
-      {renderTrigger ? (
-        renderTrigger({ onClick: onOpen })
-      ) : (
-        <button type="button" onClick={onOpen} className={`${buttonClass} ${className}`.trim()}>
-          {label}
-          {variant === "primary" && (
-            <svg
-              className="h-4 w-4 transition-transform group-hover:translate-x-0.5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-            </svg>
-          )}
-        </button>
-      )}
-
-      <AnimatePresence>
+  const overlay = (
+    <AnimatePresence>
         {stage !== "closed" && (
           <motion.div
             key="backdrop"
@@ -505,6 +495,35 @@ export function InstallEmailGate({
           </motion.div>
         )}
       </AnimatePresence>
+  );
+
+  return (
+    <>
+      {renderTrigger ? (
+        renderTrigger({ onClick: onOpen })
+      ) : (
+        <button type="button" onClick={onOpen} className={`${buttonClass} ${className}`.trim()}>
+          {label}
+          {variant === "primary" && (
+            <svg
+              className="h-4 w-4 transition-transform group-hover:translate-x-0.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+          )}
+        </button>
+      )}
+      {/* Portal the modal to document.body so a transformed ancestor (e.g.
+          `.reveal-up` with `transform: translateY`) can't trap position:fixed
+          inside its own stacking context, which would let clicks leak through
+          to elements layered on top of the modal at viewport level. */}
+      {mounted && typeof document !== "undefined"
+        ? createPortal(overlay, document.body)
+        : null}
     </>
   );
 }