fix(modal): render Modal with React Portal to center it on the screen

fix(calendar): add type="button" to all buttons in PersianCalendar to prevent form submission

assets/admin/components/ui/Modal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -29,7 +30,7 @@ export default function Modal({ open, title, size = 'md', onClose, children, foo
 
   if (!open) return null;
 
-  return (
+  return createPortal(
     <div className="overlay" onClick={onClose}>
       <div
         className="modal"
@@ -38,13 +39,14 @@ export default function Modal({ open, title, size = 'md', onClose, children, foo
       >
         <div className="modal-head">
           <h2>{title}</h2>
-          <button className="mini-btn" onClick={onClose}>
+          <button type="button" className="mini-btn" onClick={onClose}>
             <XMarkIcon style={{ width: 18, height: 18 }} />
           </button>
         </div>
         <div className="modal-body">{children}</div>
         {footer && <div className="modal-foot">{footer}</div>}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }