From 10ae434c26f5c356f02e20457725fc13c14f1847 Mon Sep 17 00:00:00 2001
From: chaulmark <chris@sigd.net>
Date: Sun, 24 May 2026 11:02:49 -0600
Subject: [PATCH] fix: render ContactModal via portal to fix centering when
 inside transformed ancestors

---
 src/components/shared/ContactModal.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/shared/ContactModal.tsx b/src/components/shared/ContactModal.tsx
index 4cf052f..9278497 100644
--- a/src/components/shared/ContactModal.tsx
+++ b/src/components/shared/ContactModal.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { motion, AnimatePresence } from 'framer-motion'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
 import { useNotification } from '@/components/providers/notification-provider'
 
@@ -26,6 +27,12 @@ const validateEmail = (email: string) => {
 
 export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
   const { showNotification } = useNotification()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -105,7 +112,9 @@ export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
     }
   }
 
-  return (
+  if (!mounted) return null
+
+  return createPortal(
     <AnimatePresence>
       {isOpen && (
         <motion.div
@@ -246,6 +255,7 @@ export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
           </motion.div>
         </motion.div>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body
   )
 }