fix modal height

src/components/ui/modal/modal.jsx

@@ -1,23 +1,23 @@
-import styles from "./modal.module.css"
+import { createPortal } from "react-dom";
+import styles from "./modal.module.css";
 import Button from "../button/button.jsx";
 
 const Modal = ({ open, onClose, children, title }) => {
 
-    if(!open) return null;
+    if (!open) return null;
 
-    return <div className={styles.overlay}>
+    return createPortal(
+        <div className={styles.overlay}>
+            <div className={styles.modal}>
+                {title && <h2>{title}</h2>}
+                {children}
+                <div className={styles.modalFooter}>
+                    <Button onClick={onClose}>Fermer</Button>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};
 
-        <div className={styles.modal}>
-
-            {title && <h2>{title}</h2>}
-
-            {children}
-
-            <div className={styles.modalFooter}> <Button onClick={onClose}>Fermer</Button> </div>
-
-        </div>
-
-    </div>
-}
-
-export default Modal;
+export default Modal;

src/components/ui/modal/modal.module.css

@@ -7,8 +7,10 @@
     background-color: rgba(0, 0, 0, 0.25);
     display: flex;
     justify-content: center;
-    align-items: center;
     z-index: 1000;
+    align-items: flex-start;
+    overflow-y: auto;
+    padding: 40px 0;
 }
 
 .modal {
@@ -16,6 +18,7 @@
     border-radius: 8px;
     min-width: 300px;
     max-width: 70%;
+    max-height: none;
     position: relative;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
     width: clamp(300px, 50vw, 600px);