From 649d0c18444429c0a6f30a67574be737313559df Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Fri, 28 Aug 2020 18:03:17 +0300
Subject: [PATCH] fix(storefront): BCTHEME-172 Card content truncated on
 zooming browser to 400%

---
 CHANGELOG.md                                  |   1 +
 .../scss/components/stencil/cart/_cart.scss   |   6 +
 templates/components/common/cart-preview.html | 134 +++++++++---------
 3 files changed, 75 insertions(+), 66 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2bdf58f1bf..11690031af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@
 - Improper heading hierarchy on Sitemap. [#1774](https://github.com/bigcommerce/cornerstone/pull/1774)
 - Added modal trap for for product details. [#1758](https://github.com/bigcommerce/cornerstone/pull/1758)
 - Added tooltips for carousel Previous and Next buttons. [#1749](https://github.com/bigcommerce/cornerstone/pull/1749)
+- Card content truncated on zooming browser to 400%. [#1803](https://github.com/bigcommerce/cornerstone/pull/1803)
 
 ## 4.9.0 (07-28-2020)
 - Added correct alt text on image change in product view. [#1747](https://github.com/bigcommerce/cornerstone/pull/1747)
diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
index 7cf8dec342..ffa9e1c40a 100644
--- a/assets/scss/components/stencil/cart/_cart.scss
+++ b/assets/scss/components/stencil/cart/_cart.scss
@@ -17,6 +17,7 @@ $cart-thumbnail-maxHeight:              14rem;
 $cart-thumbnail-paddingVertical:        0.5rem;
 
 $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-spacing;
+$card-preview-zoom-bottom-offset:       6rem;
 
 //
 // Shared styles for additional checkout buttons
@@ -558,6 +559,11 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 //
 // -----------------------------------------------------------------------------
 
+.previewCartWrapper {
+    max-height: calc(100vh - #{$card-preview-zoom-bottom-offset});
+    overflow: auto;
+}
+
 .previewCartList {
     @include u-listReset;
     border-collapse: collapse;
diff --git a/templates/components/common/cart-preview.html b/templates/components/common/cart-preview.html
index f027a3b0dc..1f8b5c7593 100644
--- a/templates/components/common/cart-preview.html
+++ b/templates/components/common/cart-preview.html
@@ -1,80 +1,82 @@
-<div class="previewCart">
-    {{#if cart.items.length}}
-        <ul class="previewCartList">
-            {{#each (limit cart.items 4)}}
-                <li class="previewCartItem">
-                    <div class="previewCartItem-image">
-                        {{#if type '==' 'GiftCertificate'}}
-                            <img src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
-                        {{else}}
-                            {{> components/common/responsive-img
-                                image=image
-                                fallback_size=../../theme_settings.productthumb_size
-                                lazyload=../../theme_settings.lazyload_mode
-                                default_image=../../theme_settings.default_image_product
-                            }}
-                        {{/if}}
-                    </div>
+<div class="previewCartWrapper">
+    <div class="previewCart">
+        {{#if cart.items.length}}
+            <ul class="previewCartList">
+                {{#each (limit cart.items 4)}}
+                    <li class="previewCartItem">
+                        <div class="previewCartItem-image">
+                            {{#if type '==' 'GiftCertificate'}}
+                                <img src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
+                            {{else}}
+                                {{> components/common/responsive-img
+                                    image=image
+                                    fallback_size=../../theme_settings.productthumb_size
+                                    lazyload=../../theme_settings.lazyload_mode
+                                    default_image=../../theme_settings.default_image_product
+                                }}
+                            {{/if}}
+                        </div>
 
-                    <div class="previewCartItem-content">
-                        <span class="previewCartItem-brand">
-                            {{brand.name}}
-                        </span>
+                        <div class="previewCartItem-content">
+                            <span class="previewCartItem-brand">
+                                {{brand.name}}
+                            </span>
 
-                        <h6 class="previewCartItem-name">
-                            <a href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
-                        </h6>
+                            <h6 class="previewCartItem-name">
+                                <a href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
+                            </h6>
 
-                        <span class="previewCartItem-price">
-                            {{#if quantity '>' 1}}
-                                {{quantity}} &times;
-                            {{/if}}
-                            {{#or ../customer (if ../theme_settings.restrict_to_login '!==' true)}}
-                                <span{{#if price_discounted}} class="price--discounted"{{/if}}>{{price.formatted}}</span>
-                                {{#if price_discounted}}
-                                    {{price_discounted.formatted}}
+                            <span class="previewCartItem-price">
+                                {{#if quantity '>' 1}}
+                                    {{quantity}} &times;
                                 {{/if}}
-                            {{else}}
-                                {{> components/common/login-for-pricing}}
-                            {{/or}}
-                        </span>
+                                {{#or ../customer (if ../theme_settings.restrict_to_login '!==' true)}}
+                                    <span{{#if price_discounted}} class="price--discounted"{{/if}}>{{price.formatted}}</span>
+                                    {{#if price_discounted}}
+                                        {{price_discounted.formatted}}
+                                    {{/if}}
+                                {{else}}
+                                    {{> components/common/login-for-pricing}}
+                                {{/or}}
+                            </span>
+                        </div>
+                    </li>
+                {{/each}}
+            </ul>
+            <div class="previewCartAction">
+                {{#if cart.show_primary_checkout_button}}
+                    <div class="previewCartAction-checkout">
+                        <a href="{{urls.checkout.single_address}}" class="button button--small button--primary">
+                            {{lang 'cart.preview.checkout_now'}}
+                        </a>
                     </div>
-                </li>
-            {{/each}}
-        </ul>
-        <div class="previewCartAction">
-            {{#if cart.show_primary_checkout_button}}
-                <div class="previewCartAction-checkout">
-                    <a href="{{urls.checkout.single_address}}" class="button button--small button--primary">
-                        {{lang 'cart.preview.checkout_now'}}
+                {{/if}}
+
+                <div class="previewCartAction-viewCart{{#unless cart.show_primary_checkout_button}} previewCartAction-viewCart--sole{{/unless}}">
+                    <a href="{{urls.cart}}" class="button button--small button--action">
+                        {{lang 'cart.preview.view_cart'}}
                     </a>
                 </div>
-            {{/if}}
 
-            <div class="previewCartAction-viewCart{{#unless cart.show_primary_checkout_button}} previewCartAction-viewCart--sole{{/unless}}">
-                <a href="{{urls.cart}}" class="button button--small button--action">
-                    {{lang 'cart.preview.view_cart'}}
-                </a>
+                {{#if cart.show_multiple_address_shipping}}
+                    <div class="previewCartAction-checkoutMultiple">
+                        <a href="{{urls.checkout.multiple_address}}">
+                            {{lang 'cart.preview.checkout_multiple'}}
+                        </a>
+                    </div>
+                {{/if}}
             </div>
-
-            {{#if cart.show_multiple_address_shipping}}
-                <div class="previewCartAction-checkoutMultiple">
-                    <a href="{{urls.checkout.multiple_address}}">
-                        {{lang 'cart.preview.checkout_multiple'}}
-                    </a>
+            {{#if cart.additional_checkout_buttons}}
+                <div class="previewCart-additionalCheckoutButtons">
+                    {{#each cart.additional_checkout_buttons}}
+                        {{{this}}}
+                    {{/each}}
                 </div>
             {{/if}}
-        </div>
-        {{#if cart.additional_checkout_buttons}}
-            <div class="previewCart-additionalCheckoutButtons">
-                {{#each cart.additional_checkout_buttons}}
-                    {{{this}}}
-                {{/each}}
+        {{else}}
+            <div class="previewCart-emptyBody">
+                {{lang 'cart.checkout.empty_cart'}}
             </div>
         {{/if}}
-    {{else}}
-        <div class="previewCart-emptyBody">
-            {{lang 'cart.checkout.empty_cart'}}
-        </div>
-    {{/if}}
+    </div>
 </div>