Update gallery.tsx (#1403)

🔧💡 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.
This commit is contained in:
Dharmveer 2024-11-22 01:15:24 +05:30 committed by GitHub
parent 8d4cc9a9a7
commit cf413a51fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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;