From 2d6021bd65929684f350eb0e8ac304377fa21249 Mon Sep 17 00:00:00 2001
From: Muhammadamin <muhamadamin1992@gmail.com>
Date: Mon, 20 Apr 2020 21:16:06 +0300
Subject: [PATCH] modal: don't add margin & padding when sticky is not full
 width

---
 js/src/modal.js             |  8 ++++++++
 js/tests/unit/modal.spec.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/js/src/modal.js b/js/src/modal.js
index 87c22943a..1b8363c01 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -462,6 +462,10 @@ class Modal extends BaseComponent {
       // Adjust fixed content padding
       SelectorEngine.find(SELECTOR_FIXED_CONTENT)
         .forEach(element => {
+          if (window.innerWidth > element.clientWidth + this._scrollbarWidth) {
+            return
+          }
+
           const actualPadding = element.style.paddingRight
           const calculatedPadding = window.getComputedStyle(element)['padding-right']
           Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
@@ -471,6 +475,10 @@ class Modal extends BaseComponent {
       // Adjust sticky content margin
       SelectorEngine.find(SELECTOR_STICKY_CONTENT)
         .forEach(element => {
+          if (window.innerWidth > element.clientWidth + this._scrollbarWidth) {
+            return
+          }
+
           const actualMargin = element.style.marginRight
           const calculatedMargin = window.getComputedStyle(element)['margin-right']
           Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index f645e9892..7cd74fdc2 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -142,6 +142,36 @@ describe('Modal', () => {
       modal.toggle()
     })
 
+    it('should not adjust the inline margin of sticky elements when element do not have full width', done => {
+      fixtureEl.innerHTML = [
+        '<div class="sticky-top" style="margin-right: 0px; width: 50%"></div>',
+        '<div class="modal"><div class="modal-dialog"></div></div>'
+      ].join('')
+
+      const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+      const originalMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+      const modalEl = fixtureEl.querySelector('.modal')
+      const modal = new Modal(modalEl)
+
+      modalEl.addEventListener('shown.bs.modal', () => {
+        const expectedMargin = 0
+        const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+
+        expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should not be adjusted while opening')
+        modal.toggle()
+      })
+
+      modalEl.addEventListener('hidden.bs.modal', () => {
+        const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+
+        expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing')
+        expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
+        done()
+      })
+
+      modal.toggle()
+    })
+
     it('should ignore values set via CSS when trying to restore body padding after closing', done => {
       fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
       const styleTest = document.createElement('style')