[Slideshow] prevent vertical overflow on slideshow

[ludoboludo]

PR Summary:

In some instances of the slideshow, there can be some odd behaviours happening with some scrolling on the media when it shouldn't.
This is to prevent this behaviour.

To replicate the issue you would need to use an image that's pretty tall, then set the slideshow section size to Adapt to first image. Check on mobile and you could get stuck on the image itself moving just a little bit: video

Why are these changes introduced?

Fixes #3454

What approach did you take?

Prevent vertical overflow.
That wouldn't have worked on sliders as they can have shadow and borders but the slideshow doesn't so I believe it should be safe.

Visual impact on existing themes

Should fix a mobile issue.

Testing steps/scenarios

• Use the following image as the first slide (doesn't matter if there's multiple slides or not): https://www.shopify.com/stock-photos/photos/flatlay-of-jade-face-roller-laying-on-a-grey-stone
• Make sure the Section height setting in the Slideshow section is set to Adapt to first image.
• In dev tools, set the Dimensions to Responsive and 600px wide (happens on a range of widths).

Demo links

• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[Roi-Arthur]

Seems good to me; must admit it took me a while to replicate so wouldn't think it was a massive issue, but broken windows are meant to be fixed 👍🏼

[sofiamatulis]

Havent been able to reproduce 🤔 Am I missing a step?

https://screenshot.click/08-07-oaj8l-uh8vo.mp4

[ludoboludo]

Havent been able to reproduce 🤔 Am I missing a step?

https://screenshot.click/08-07-oaj8l-uh8vo.mp4

A couple things to try and replicate @sofiamatulis :

• you'd need to remove the css property i'm adding in the PR but in the code not in the inspect tool
• and another thing would be to test via the mobile version of the inspect tool instead of the editor (screenshot)