From 9aea635e6408961238fbcdf13e80692e687c9753 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 12 Jul 2026 03:13:49 -0400
Subject: [PATCH] x

---
 apps/spa/src/components/ProductImageGallery.tsx | 12 ++++++------
 apps/website/src/components/ProductGallery.tsx  | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/spa/src/components/ProductImageGallery.tsx b/apps/spa/src/components/ProductImageGallery.tsx
index 403d9f1..bd322f5 100644
--- a/apps/spa/src/components/ProductImageGallery.tsx
+++ b/apps/spa/src/components/ProductImageGallery.tsx
@@ -12,15 +12,15 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
   const [currentIndex, setCurrentIndex] = useState(0)
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  const handleThumbnailClick = (idx: number) => {
+    setCurrentIndex(idx)
     if (scrollRef.current) {
-      const container = scrollRef.current
-      const child = container.children[currentIndex] as HTMLElement
+      const child = scrollRef.current.children[idx] as HTMLElement
       if (child) {
-        container.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
+        scrollRef.current.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
       }
     }
-  }, [currentIndex])
+  }
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const container = e.currentTarget
@@ -66,7 +66,7 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
           <button
             key={image.id || idx}
             type="button"
-            onClick={() => setCurrentIndex(idx)}
+            onClick={() => handleThumbnailClick(idx)}
             className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
               currentIndex === idx ? 'border-pop-pink shadow-md' : 'border-transparent opacity-60 hover:opacity-100'
             }`}
diff --git a/apps/website/src/components/ProductGallery.tsx b/apps/website/src/components/ProductGallery.tsx
index 08dd3bf..428d32e 100644
--- a/apps/website/src/components/ProductGallery.tsx
+++ b/apps/website/src/components/ProductGallery.tsx
@@ -13,15 +13,15 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
   const [activeIndex, setActiveIndex] = useState(0)
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  const handleThumbnailClick = (idx: number) => {
+    setActiveIndex(idx)
     if (scrollRef.current) {
-      const container = scrollRef.current
-      const child = container.children[activeIndex] as HTMLElement
+      const child = scrollRef.current.children[idx] as HTMLElement
       if (child) {
-        container.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
+        scrollRef.current.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
       }
     }
-  }, [activeIndex])
+  }
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const container = e.currentTarget
@@ -65,7 +65,7 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
           <button
             key={idx}
             type="button"
-            onClick={() => setActiveIndex(idx)}
+            onClick={() => handleThumbnailClick(idx)}
             className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
               activeIndex === idx ? 'border-brand-primary opacity-100' : 'border-transparent opacity-60 hover:opacity-100'
             }`}