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

@@ -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
   );
 }