x

apps/spa/src/components/ProductImageGallery.tsx

@@ -69,13 +69,13 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
   return (
     <div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full">
       {/* Thumbnails */}
-      <div className="flex flex-row md:flex-col gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
+      <div className="flex flex-row md:flex-col gap-2 md:gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
         {sortedImages.map((image, idx) => (
           <button
             key={image.id || idx}
             type="button"
             onClick={() => handleThumbnailClick(idx)}
-            className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
+            className={`relative aspect-square w-14 md:w-full flex-none overflow-hidden rounded-xl md:rounded-2xl border-2 transition-all snap-center ${
               currentIndex === idx ? 'border-pop-pink shadow-md' : 'border-transparent opacity-60 hover:opacity-100'
             }`}
           >