fix img modal

components/modal/modal.tsx

@@ -11,7 +11,7 @@ import {
 import { useCollection } from "./useCollection";
 import { Button } from "../button";
 import { useUser } from "@/utils/useUser";
-import { useKeyPressEvent } from "react-use";
+import { useKeyPressEvent, useUpdateEffect } from "react-use";
 
 interface Props {
   id: string;
@@ -37,8 +37,6 @@ const dropIn = {
   },
 };
 
-const keys = ["ArrowLeft", "ArrowRight"];
-
 export const Modal: React.FC<Props> = ({ id, onClose }) => {
   const { collection, updateVisibility, remove, next, previous } =
     useCollection(id);
@@ -53,10 +51,22 @@ export const Modal: React.FC<Props> = ({ id, onClose }) => {
     return date.toLocaleDateString();
   }, [collection?.createdAt]);
 
+  useUpdateEffect(() => {
+    if (collection?.id) {
+      document.body.style.overflow = "hidden";
+      document.documentElement.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+      document.documentElement.style.overflow = "unset";
+      document.documentElement.style.overflowX = "hidden";
+      document.body.style.overflowX = "hidden";
+    }
+  }, [collection]);
+
   return (
     <motion.div
       onClick={onClose}
-      className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-6"
+      className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-start justify-center px-6 pb-6 pt-6 lg:pt-20"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}