fix(storefront): BCTHEME-851 Product images on PDP has clipped outline (

#2124)

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Fix product images on PDP has clipped outline. [#2124](https://github.com/bigcommerce/cornerstone/pull/2124)
 - Changed debounce wait time for search to 1200 ms from 200 ms. [#2115](https://github.com/bigcommerce/cornerstone/pull/2115)
 - additional checkout buttons don't work on applying 100% discount coupon. [#2109](https://github.com/bigcommerce/cornerstone/pull/2109)
 - Fix sliding carousel with products cause footer headers flickering. [#2119](https://github.com/bigcommerce/cornerstone/pull/2119)

assets/scss/components/stencil/productView/_productView.scss

@@ -51,7 +51,7 @@
         @include lazy-loaded-img;
         /* Object-fit polyfill */
         font-family: "object-fit: contain;";
-        max-height: 100%;
+        height: 100%;
         object-fit: contain;
         width: 100%;
     }
@@ -98,8 +98,7 @@
 
 .productView-thumbnail {
     @include grid-column(3);
-    padding-left: spacing("quarter");
-    padding-right: spacing("quarter");
+    padding: spacing("quarter");
     text-align: center;
 
     @include breakpoint("large") {
@@ -110,7 +109,7 @@
 .productView-thumbnail-link {
     border: container("border");
     box-sizing: content-box;
-    display: inline-flex;
+    display: flex;
     height: 67px;
     justify-content: center;
     max-width: 75px;