Fixed effects never trigger when using on screen with a width < 1080px

src/components/RevealOnScroll.jsx

@@ -4,13 +4,19 @@ function RevealOnScroll({ children }) {
     const ref = useRef(null);
 
     useEffect(() => {
+        const isSmallScreen = window.innerWidth < 1080;
+        const observerOptions = {
+            threshold: 0.2,
+            rootMargin: isSmallScreen ? "0px" : "0px 0px -50px 0px"
+        };
+
         const observer = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
                 ref.current.classList.add("visible");
             } else {
                 ref.current.classList.remove("visible");
             }
-        }, { threshold: 0.2, rootMargin: "0px 0px -50px 0px" });
+        }, observerOptions);
 
         if (ref.current) {
             observer.observe(ref.current);