From 31d30bdfa06f00b613a10813761d500f006da792 Mon Sep 17 00:00:00 2001
From: kikootwo <folcards@yahoo.com>
Date: Sat, 16 May 2026 06:31:23 -0400
Subject: [PATCH] Render Modal with createPortal

Import createPortal from react-dom and render the Modal into document.body using a React portal. Add a server-side guard (typeof document === 'undefined') to avoid SSR/runtime errors and preserve the existing early return when the modal is closed. This ensures the modal overlays correctly (z-index/positioning) by mounting at the document root.
---
 src/components/ui/Modal.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index baecde5..ee4a556 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -6,6 +6,7 @@
 'use client';
 
 import React, { useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { cn } from '@/lib/utils/cn';
 
 interface ModalProps {
@@ -54,6 +55,7 @@ export function Modal({
   }, [isOpen, handleClose]);
 
   if (!isOpen) return null;
+  if (typeof document === 'undefined') return null;
 
   const sizeClasses = {
     sm: 'max-w-md',
@@ -63,7 +65,7 @@ export function Modal({
     full: 'max-w-[95vw]',
   };
 
-  return (
+  return createPortal(
     <div className="fixed inset-0 z-50 overflow-y-auto">
       {/* Backdrop */}
       <div
@@ -114,6 +116,7 @@ export function Modal({
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }