From bdc9e881f93d7063a30bb362951509ffa627ac98 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Mon, 29 Mar 2021 09:55:40 +0300
Subject: [PATCH] fix(storefront): BCTHEME-431 remove horizontal scroll on
 swatch options PDP

---
 CHANGELOG.md                              |  1 +
 assets/js/theme/common/product-details.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0146abfbd..a5b165d79e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed unnecessary horizontal scroll on swatch options on PDP. [#2023](https://github.com/bigcommerce/cornerstone/pull/2023)
 
 ## 5.3.0 (03-24-2021)
 - IE11 - Clicking on Search Does Not Display Search Bar. [#2017](https://github.com/bigcommerce/cornerstone/pull/2017)
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index e9f3174fec..34b2d707f1 100644
--- a/assets/js/theme/common/product-details.js
+++ b/assets/js/theme/common/product-details.js
@@ -25,6 +25,21 @@ export default class ProductDetails extends ProductDetailsBase {
         const hasOptions = $productOptionsElement.html().trim().length;
         const hasDefaultOptions = $productOptionsElement.find('[data-default]').length;
         const $productSwatchGroup = $('[id*="attribute_swatch"]', $form);
+        const $productSwatchLabels = $('.form-option-swatch', $form);
+
+        $(window).on('load', () => {
+            $.each($productSwatchLabels, (_, label) => {
+                const $optionImage = $('.form-option-expanded', $(label));
+                const optionImageWidth = $optionImage.outerWidth();
+                const { right } = label.getBoundingClientRect();
+                const emptySpaceToScreenRightBorder = window.screen.width - right;
+                const shiftValue = optionImageWidth - emptySpaceToScreenRightBorder;
+
+                if (emptySpaceToScreenRightBorder < (optionImageWidth + 55)) {
+                    $optionImage.css('left', `${shiftValue > 0 ? -shiftValue : shiftValue}px`);
+                }
+            });
+        });
 
         if (context.showSwatchNames) {
             this.$swatchOptionMessage.removeClass('u-hidden');