search

vercel / commerce

Next.js Commerce
https://demo.vercel.store
MIT License
11.07k stars 4.06k forks source link

Gallery UI Breakage on Product View Page #1264

Open dharmveer97 opened 8 months ago

dharmveer97 commented 8 months ago

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 commented 8 months ago

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

KyTechInc commented 8 months ago

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.

image