some edit

blocks/feature322.tsx

@@ -8,7 +8,7 @@ import {
   useScroll,
   useTransform,
 } from "framer-motion";
-import React, { useRef, useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -228,11 +228,31 @@ const Feature322 = ({
   testimonial = DEFAULT_TESTIMONIAL,
 }: Feature322Props) => {
   const scrollRef = useRef<HTMLElement>(null);
+  const [stageHeight, setStageHeight] = useState(0);
   const { scrollYProgress } = useScroll({
     container: scrollRef,
   });
   const [activeIndex, setActiveIndex] = useState(0);
 
+  useLayoutEffect(() => {
+    const scrollContainer = scrollRef.current;
+    if (!scrollContainer) return;
+
+    const updateStageHeight = () => {
+      setStageHeight(scrollContainer.clientHeight);
+    };
+
+    updateStageHeight();
+    const observer = new ResizeObserver(updateStageHeight);
+    observer.observe(scrollContainer);
+
+    return () => observer.disconnect();
+  }, []);
+
+  const scrollSegmentCount = Math.max(features.length - 1, 1);
+  const scrollSpacerHeight =
+    stageHeight > 0 ? stageHeight * scrollSegmentCount : undefined;
+
   useMotionValueEvent(scrollYProgress, "change", (latest) => {
     const nextIndex = getActiveFeatureIndex(latest, features.length);
     setActiveIndex((prev) => (prev === nextIndex ? prev : nextIndex));
@@ -246,14 +266,21 @@ const Feature322 = ({
       dir="rtl"
       lang="fa"
       className={cn(
-        "relative h-svh w-full min-w-[20rem] max-w-full overflow-x-clip overflow-y-auto sm:min-w-[36rem] lg:min-w-[64rem]",
+        "relative h-svh max-h-full min-h-[28rem] w-full min-w-[20rem] max-w-full overflow-x-clip overflow-y-auto overscroll-contain sm:min-w-[36rem] lg:min-h-[32rem] lg:min-w-[64rem]",
         className,
       )}
     >
       <div className="container min-w-0 w-full max-w-full">
         {/* Desktop: sticky stage + scroll spacer */}
         <div className="relative hidden lg:block">
-          <div className="sticky top-0 flex h-svh w-full min-w-0 flex-col items-center justify-center">
+          <div
+            className="sticky top-0 z-10 flex w-full min-w-0 flex-col items-center justify-center"
+            style={
+              stageHeight > 0
+                ? { height: stageHeight }
+                : { minHeight: "28rem" }
+            }
+          >
             <div className="relative w-full min-w-0 max-w-full">
               <AnimatePresence mode="wait" initial={false}>
                 {activeFeature ? (
@@ -279,8 +306,12 @@ const Feature322 = ({
           </div>
 
           <div
-            style={{ height: `${Math.max(features.length, 1) * 75}vh` }}
-            className="pointer-events-none w-full"
+            style={
+              scrollSpacerHeight
+                ? { height: scrollSpacerHeight }
+                : { height: `${scrollSegmentCount * 75}vh` }
+            }
+            className="pointer-events-none w-full shrink-0"
             aria-hidden
           />
         </div>