Quick add modal display issues when selecting variant on mobile

[sofiamatulis]

Describe the current behavior
A store has the media desktop layout on the product page set to thumbnail carousel, there is a long list of variants, and the quick add button on the featured collection section is enabled. When viewing the Quick Add modal on a mobile device, if the user scrolls down and selects a variant, the content moves up out of view and the bottom gets pushed up. At this point the user can't scroll and use the product form correctly.

Describe the expected behavior
There should be no empty white space added to it and the user should be able to scroll

Steps to replicate
(On mobile)

• create a product with many variants, preferably with long names
• on the product page, set the media desktop layout to thumbnail carousel
• place a featured collection section on the homepage which links to a collection with your product in it
• enable the Quick Add button on the featured collection section
• click on the choose options button in the product
• select a variant near the top, then one near the bottom (you may need to do this a few times)

Additional context/screenshots
Video: https://screenshot.click/04-04-1e8xk-i13j8.mp4

[andrewetchen]

I was looking at this issue today. I was able to reproduce the issue as described on Dawn 7.0.1

dawn-7.0.1-quick-add-unavailable-variant.mp4

However, I was unable to reproduce on the latest main (as of December 20 2022). I'm assuming this issue got fixed in #2031 and potentially other merged PRs

dawn-main-quick-add-unavailable-variant-fixed.mp4

Notes on replication steps

You can follow your replication steps above but I found that all I needed to do was:

• Go the product page and change the desktop layout to Thumbnail carousel
• Enable quick add button on either Collection > Product grid or from within a Featured collection section
• View a product with more than one variant and preferably with variant combinations that produce "unavailable"
• I also found it easier to replicate the problem by reducing the height of my browser window

[andrewetchen]

This has already been fixed, see: https://github.com/Shopify/dawn-private/issues/77