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

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)
 
 ## 6.1.0 (09-03-2021)
 - Fixed images placeholder on hero carousel shifted on mobile when slide has content. [#2112](https://github.com/bigcommerce/cornerstone/pull/2112)

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;