fix(storefront): BCTHEME-362 fix cut off cart button on zooming 400 (#…

…1988)

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed cut off on Cart button when Zooming up to 400%. [#1988](https://github.com/bigcommerce/cornerstone/pull/1988)
 - Category pages are creating alt attribute within the span tag. [1987](https://github.com/bigcommerce/cornerstone/pull/1987)
 - Add alt attribute for no image placeholders. [#1984](https://github.com/bigcommerce/cornerstone/pull/1984)
 - For non-required options, when the "None" option displays on the storefront it should be deselected when another option is chosen. [#1980](https://github.com/bigcommerce/cornerstone/pull/1980)

assets/scss/components/stencil/cart/_cart.scss

@@ -608,6 +608,16 @@ $card-preview-zoom-bottom-offset:       6rem;
     }
 
     @include lazy-loaded-padding('productthumb_size');
+
+    &:after {
+        @include breakpoint("xxsmall") {
+            padding-bottom: 75%;
+        }
+
+        @include breakpoint("xsmall") {
+            padding-bottom: 100%;
+        }
+    }
 }
 
 .previewCartItem-content {
@@ -640,7 +650,14 @@ $card-preview-zoom-bottom-offset:       6rem;
     @include grid-row;
     border-top: container("border");
     display: block;
-    padding: spacing("single") spacing("half");
+
+    @include breakpoint("xxsmall") {
+        padding: spacing("half") spacing("quarter");
+    }
+
+    @include breakpoint("xsmall") {
+        padding: spacing("single") spacing("half");
+    }
 
     .button {
         margin: 0;