x

apps/website/src/components/ProductGallery.tsx

@@ -14,6 +14,23 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
   const scrollRef = useRef<HTMLDivElement>(null)
   const isScrollingRef = useRef(false)
 
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const onScrollEnd = () => {
+      if (isScrollingRef.current) return
+      const width = el.clientWidth
+      if (width > 0) {
+        const newIndex = Math.round(el.scrollLeft / width)
+        if (newIndex >= 0 && newIndex < images.length) {
+          setActiveIndex(newIndex)
+        }
+      }
+    }
+    el.addEventListener('scrollend', onScrollEnd)
+    return () => el.removeEventListener('scrollend', onScrollEnd)
+  }, [images.length])
+
   const handleThumbnailClick = (idx: number) => {
     setActiveIndex(idx)
     if (scrollRef.current) {
@@ -26,19 +43,6 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
     }
   }
 
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    if (isScrollingRef.current) return
-    const container = e.currentTarget
-    const scrollLeft = container.scrollLeft
-    const width = container.clientWidth
-    if (width > 0) {
-      const newIndex = Math.round(scrollLeft / width)
-      if (newIndex !== activeIndex && newIndex >= 0 && newIndex < images.length) {
-        setActiveIndex(newIndex)
-      }
-    }
-  }
-
   if (images.length === 0) return null
 
   // If there's only one image, don't show thumbnails
@@ -89,7 +93,6 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
       <div className="relative aspect-square w-full flex-1 overflow-hidden rounded-3xl bg-surface-card shadow-card">
         <div 
           ref={scrollRef}
-          onScroll={handleScroll}
           className="flex w-full h-full overflow-x-auto snap-x snap-mandatory hide-scrollbar"
         >
           {images.map((img, idx) => (