upd

src/components/ui/Select.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { motion } from "motion/react";
 import { AnimatePresence } from "motion/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useClickAway } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import ChevronDownIcon from "../icons/ChevronDownIcon";
@@ -25,10 +25,26 @@ function Select({
 
   const ref = useClickAway<HTMLDivElement>(() => setIsShow(false));
 
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => setSelectedOption(defaultOption), [defaultOption]);
 
   useEffect(() => onSelect(selectedOption), [selectedOption]);
 
+  function handleScroll() {
+    if (!dropDownRef.current) return;
+    dropDownRef.current.style.maxHeight = `calc(100vh - ${
+      dropDownRef.current?.getBoundingClientRect().y
+    }px - 0.278vw)`;
+  }
+
+  useEffect(() => {
+    handleScroll();
+    document.addEventListener("scroll", handleScroll);
+
+    return () => document.removeEventListener("scroll", handleScroll);
+  }, [isShow]);
+
   return (
     <div ref={ref} className={clsx("relative", className)}>
       {label && (
@@ -58,12 +74,7 @@ function Select({
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.15 }}
-            ref={(el) => {
-              if (el)
-                el.style.maxHeight = `calc(100vh - ${
-                  el?.getBoundingClientRect().y
-                }px - 0.278vw)`;
-            }}
+            ref={dropDownRef}
             className="absolute 2xl:mt-[0.278vw] 2xl:pt-[0.278vw] mt-1 p-1 2xl:space-y-[0.139vw] space-y-0.5 shadow-[0px_2px_8px_rgba(0,0,0,0.15)] overflow-auto rounded-xl bg-white w-full z-10"
           >
             {options.map((option, index) => (