Gallery UI Breakage on Product View Page

[dharmveer97]

Unstable Layout and Mobile Breakage with Over 10 Gallery Images

** Issue Description**

In the product view page, when the gallery contains more than 10 images in an array, the UI of the page breaks. Specifically, the width of the section automatically increases, causing the entire page layout to break. Additionally, on mobile devices, the layout completely collapses when more than 8 or 10 images are added to the product view page gallery.

Solution

Implement a scrollable feature for the gallery to prevent the automatic width increase and layout breakage. Referencing the react-image-gallery package as an example, aim for a responsive and stable gallery layout that can handle a larger number of images without compromising the overall page structure.

Reference:

react-image-gallery - Example version for a stable and responsive gallery.

Tailwind CSS example :--- https://tailwindui.com/components/ecommerce/components/product-overviews

[dharmveer97]

https://github.com/vercel/commerce/assets/51308779/cb7f0e62-6910-4251-a142-e8a5663abd97

[KyTechInc]

Not a perfect solution but my approach was to add a flex-wrap to this element. For a store, I'd rather have all variants visual in case the user doesn't know to scroll. However, that does introduce the potential for widow elements at certain widths.