modal upd

src/components/ModalContainer.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef } from "react";
-import useModalStore from "../stores/useModalStore";
-import { AnimatePresence, motion } from "motion/react";
-import CloseIcon from "./icons/CloseIcon";
-import Button from "./Button";
+import { useEffect, useRef } from 'react';
+import useModalStore from '../stores/useModalStore';
+import { AnimatePresence, motion } from 'motion/react';
+import CloseIcon from './icons/CloseIcon';
+import Button from './Button';
 
 const duration = 300;
 
@@ -24,7 +24,7 @@ function ModalContainer() {
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key !== "Escape") return;
+    if (e.key !== 'Escape') return;
     setIsOpen(false);
   }
 
@@ -39,12 +39,12 @@ function ModalContainer() {
   }, [isOpen]);
 
   useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("keydown", handleKeydown);
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('keydown', handleKeydown);
 
     return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('keydown', handleKeydown);
     };
   }, []);
 
@@ -59,16 +59,16 @@ function ModalContainer() {
         >
           <div
             ref={popoverRef}
-            className="fixed top-0 left-0 w-full h-full bg-black/70 overflow-y-auto flex flex-col items-center justify-center"
+            className="fixed inset-0 bg-black/70 overflow-y-auto flex flex-col items-end justify-center"
           >
             <div className="max-h-full">
-              <div ref={divRef} className="p-[0.972vw]">
+              <div ref={divRef} className="p-[0.972vw] h-dvh">
                 <div
                   ref={buttonRef}
-                  className="absolute top-0 left-0 w-full h-full cursor-pointer"
+                  className="absolute inset-0 cursor-pointer"
                   onClick={() => setIsOpen(false)}
                 />
-                <div className="relative w-full">
+                <div className="relative w-full h-full">
                   {modal}
                   <Button
                     onlyIcon