From 53e5b5edde9d1075de9dab95dcb75554a04e8611 Mon Sep 17 00:00:00 2001
From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:23:16 +0200
Subject: [PATCH] fix(storefront): BCTHEME-1710 Pre-Orded text in Polish looks
 cropped in the button on Product page (#2414)

---
 CHANGELOG.md                                   |  1 +
 .../stencil/productView/_productView.scss      | 18 ++++++++++++++++++
 templates/components/products/add-to-cart.html |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffa457266e..b29093dc7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change case of Page builder menu item text [#2407](https://github.com/bigcommerce/cornerstone/pull/2407)
 - Corrected typo with the word default previously deafault in config.json [#2410](https://github.com/bigcommerce/cornerstone/pull/2410)
 - Adding autocomplete to common input fields [2397](https://github.com/bigcommerce/cornerstone/pull/2397)
+- Pre-Orded text in Polish looks cropped in the button on Product page [2414](https://github.com/bigcommerce/cornerstone/pull/2414)
 - Use triple sash on customer's company name to prevent escaping ampersands [#2399](https://github.com/bigcommerce/cornerstone/pull/2399)
 - Adding aria attributes to cart page coupon code and gift cert buttons [#2391](https://github.com/bigcommerce/cornerstone/pull/2391)
 
diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
index bb9b4033e1..6a4551d507 100644
--- a/assets/scss/components/stencil/productView/_productView.scss
+++ b/assets/scss/components/stencil/productView/_productView.scss
@@ -358,6 +358,24 @@
             width: 50%;
         }
 
+        &.pre-order-buttons {
+            @include breakpoint("small") {
+                min-width: 50%;
+                width: auto;
+            }
+
+            @include breakpoint("medium") {
+                margin-right: remCalc(11px);
+                min-width: auto;
+                padding: 0;
+                width: auto;
+            }
+
+            .button {
+                padding: remCalc(13px) remCalc(24px);
+            }
+        }
+
         .button {
             margin: 0;
             width: 100%;
diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
index 70c5103f80..2cfa5cebfc 100644
--- a/templates/components/products/add-to-cart.html
+++ b/templates/components/products/add-to-cart.html
@@ -42,7 +42,7 @@
         <p class="alertBox-column alertBox-message"></p>
     </div>
     {{#or customer (unless settings.hide_price_from_guests)}}
-        <div class="add-to-cart-buttons">
+        <div class="add-to-cart-buttons {{#if product.pre_order}}pre-order-buttons{{/if}}">
             <div class="form-action">
                 <input
                         id="form-action-addToCart"