some edit

blocks/feature199.tsx

@@ -220,56 +220,61 @@ const Feature199 = ({ className }: Feature199Props) => {
     const handleScroll = () => {
       const container = containerRef.current;
       if (!container) return;
-      const items = container.getElementsByClassName("feature-item");
-      const containerMiddle = window.innerHeight * 0.6;
 
-      let closestItem: number | null = null;
-      let closestDistance = Infinity;
+      const rect = container.getBoundingClientRect();
+      const listHeight = container.offsetHeight;
+      const viewportHeight = window.innerHeight;
+      const scrollRange = Math.max(listHeight - viewportHeight * 0.45, 1);
+      const passed = Math.min(Math.max(-rect.top + viewportHeight * 0.2, 0), scrollRange);
+      const progress = passed / scrollRange;
+      const steppedIndex = Math.round(progress * (FEATURES.length - 1));
+      const nextIndex = Math.min(Math.max(steppedIndex, 0), FEATURES.length - 1);
 
-      Array.from(items).forEach((item, index) => {
-        const rect = item.getBoundingClientRect();
-        const distance = Math.abs(rect.top + rect.height / 2 - containerMiddle);
-
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestItem = index;
-        }
-      });
-
-      if (closestItem !== null) {
-        setActiveFeature(closestItem);
-      }
+      setActiveFeature((prev) => (prev === nextIndex ? prev : nextIndex));
     };
 
-    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, [isMobile]);
 
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <h2 className="mb-10 text-xl font-bold text-balance md:text-2xll lg:mb-20 lg:text-2xll">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("min-w-0 overflow-x-hidden py-16 sm:py-24 lg:py-32", className)}
+    >
+      <div className="container min-w-0">
+        <h2 className="mb-8 text-xl font-bold text-balance sm:mb-10 sm:text-2xl lg:mb-20 lg:text-3xl">
           هر سرنخ را تا قرارداد دنبال کنید
         </h2>
-        <div className="relative gap-6 pb-72 md:grid md:grid-cols-5 md:pb-0">
-          <div className="col-span-3 pb-4 text-start" ref={containerRef}>
+        <div className="relative min-w-0 gap-6 pb-64 sm:pb-60 lg:grid lg:grid-cols-5 lg:pb-0">
+          <div
+            className="col-span-3 min-w-0 pb-4 text-start"
+            ref={containerRef}
+          >
             <Separator />
             {FEATURES.map((feature, index) => (
               <React.Fragment key={feature.id}>
                 <div
-                  className="feature-item py-3"
+                  className="feature-item py-2.5 sm:py-3"
                   onMouseEnter={() => !isMobile && setActiveFeature(index)}
                 >
-                  <div className="flex items-center gap-7 md:gap-16 lg:gap-28">
+                  <div
+                    className={cn(
+                      "flex min-w-0 items-center gap-3 rounded-lg px-2 py-2 transition-colors sm:gap-5 sm:px-0 sm:py-0 lg:gap-16 xl:gap-28",
+                      activeFeature === index && "bg-muted/40 sm:bg-transparent",
+                    )}
+                  >
                     <span
                       className={cn(
-                        "invisible size-2.5 shrink-0 rounded-full bg-primary md:size-3",
+                        "invisible size-2 shrink-0 rounded-full bg-primary sm:size-2.5 lg:size-3",
                         activeFeature === index && "visible",
                       )}
                     />
                     <p
                       className={cn(
-                        "text-[clamp(1.65rem,3vw,2.15rem)] font-bold text-muted-foreground",
+                        "min-w-0 wrap-break-word text-base font-bold text-muted-foreground sm:text-lg md:text-xl lg:text-2xl xl:text-3xl",
                         activeFeature === index && "text-primary",
                       )}
                     >
@@ -281,11 +286,11 @@ const Feature199 = ({ className }: Feature199Props) => {
               </React.Fragment>
             ))}
           </div>
-          <div className="sticky bottom-3 start-3 col-span-2 h-72 w-fit border md:top-20 md:h-fit">
+          <div className="fixed inset-x-3 bottom-3 z-20 mx-auto max-w-md border bg-background shadow-md md:sticky md:top-20 md:bottom-auto md:inset-x-auto md:col-span-2 md:mx-0 md:max-w-none md:h-fit md:w-fit md:shadow-none">
             <img
               src={FEATURES[activeFeature].image}
               alt={FEATURES[activeFeature].imageAlt}
-              className="h-72 md:h-auto"
+              className="h-44 w-full object-cover sm:h-52 md:h-72 md:w-auto md:object-fill"
             />
           </div>
         </div>