changes + improvements

components/Dropdown.tsx

@@ -24,7 +24,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-10`}
+      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = (

components/Modal/Link/LinkDetails.tsx

@@ -194,11 +194,9 @@ export default function LinkDetails({ link }: Props) {
       </div>
       {link.description && (
         <>
-          <hr className="my-3" />
-          <div className="text-sky-900 max-h-[20rem] rounded-md overflow-y-auto hyphens-auto">
+          <div className="text-gray-500 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
             {link.description}
           </div>
-          <hr className="my-3" />
         </>
       )}
 

layouts/MainLayout.tsx

@@ -1,11 +1,12 @@
 import Navbar from "@/components/Navbar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { useSession } from "next-auth/react";
 import Loader from "../components/Loader";
 import useRedirect from "@/hooks/useRedirect";
 import { useRouter } from "next/router";
 import ModalManagement from "@/components/ModalManagement";
+import useModalStore from "@/store/modals";
 
 interface Props {
   children: ReactNode;
@@ -16,6 +17,13 @@ export default function MainLayout({ children }: Props) {
   const router = useRouter();
   const redirect = useRedirect();
   const routeExists = router.route === "/_error" ? false : true;
+  const { modal } = useModalStore();
+
+  useEffect(() => {
+    modal
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+  }, [modal]);
 
   if (status === "authenticated" && !redirect && routeExists)
     return (