Product thumbnails are stretched on mobile (Product page)

[sofiamatulis]

Describe the current behavior
Product thumbnails are stretching on mobile on Sense

Describe the expected behavior
Thumbnails should not be stretching

Version information (Dawn, browsers and operating systems)

• Dawn Version: 1.0.0
• Chrome Version 91.0.4472.114
• macOS Version 11.3.1

Possible solution

Additional context/screenshots
https://screenshot.click/31-55-8op0k-j8xn2.png

https://screenshot.click/31-55-sv1wd-zhsyg.png

[LexMetcalfe]

It looks like this is happening because the thumbnail--narrow img styles assign a height of 100% and a width of auto, which causes the image to distort. Swapping those attributes fixed the issue for me.

My solution was to just add the following to the bottom of section-main-product.css:

.thumbnail--narrow img {
    height: auto;
    width: 100%;
}

[rigid94]

@LexMetcalfe Your solution does fix the image stretch but doesn't address the space above/below the thumbnails

[LexMetcalfe]

Hey @rigid94, I forgot to mention that adding the following to the bottom of component-slider.css will adjust the size of the thumbnail frames:

@media screen and (max-width: 749px){
  .slider.slider--mobile .slider__slide {
      padding-bottom: max(var(--focus-outline-padding));
  }
}

[LucasLacerdaUX]

Just adding additional details.

Why is this bug happening?
When we implemented global settings, there was a bug that resulted in slide elements with shadows getting cut off. On Jan 12, we shipped a fix to that problem and it now adds additional padding to account for the shadows.

Because the thumbnail size was implemented in a way that the image would fill 100% of the media aspect ratio, this additional padding now distorts this height.

So, if Theme Settings > Media > Shadow > Blur is greater than 0, the images will be stretched.

I'll work on a fix.