From cf413a51fc5104c16c90bbd6711591ad70087d16 Mon Sep 17 00:00:00 2001
From: Dharmveer <51308779+dharmveer97@users.noreply.github.com>
Date: Fri, 22 Nov 2024 01:15:24 +0530
Subject: [PATCH] Update gallery.tsx (#1403)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧💡 Fix: Enhance product gallery layout in product view page

- 🖼️ Implemented `flex-wrap` for the sub-gallery images.
- 🛠️ Ensured images wrap automatically when they exceed 5 or 6, preventing overflow and maintaining responsive design.
- ✅ Confirmed that the layout remains unaffected for galleries with 3 or fewer images.

This improvement enhances user experience by making sure large image sets are displayed without affecting screen layout.
---
 components/product/gallery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 79659096c..55d7a3534 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -60,7 +60,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       </div>
 
       {images.length > 1 ? (
-        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
+        <ul className="my-12 flex items-center flex-wrap justify-center gap-2 overflow-auto py-1 lg:mb-0">
           {images.map((image, index) => {
             const isActive = index === imageIndex;