Fix sticky margin when a modal is opened (#23669)

* Adjust margin for sticky elements on modal

Previously white space was visible to the right of sticky elements due to right padding being added to the body. This fixes #23661.

* Add unit tests for margin of sticky elements on modal

2 files changed, 52 insertions, 2 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index d21a137fb6..ab73230c8f 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -68,6 +68,7 @@ const Modal = (($) => {
     DATA_TOGGLE        : '[data-toggle="modal"]',
     DATA_DISMISS       : '[data-dismiss="modal"]',
     FIXED_CONTENT      : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
+    STICKY_CONTENT     : '.sticky-top',
     NAVBAR_TOGGLER     : '.navbar-toggler'
   }
 
@@ -441,6 +442,13 @@ const Modal = (($) => {
           $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
         })
 
+        // Adjust sticky content margin
+        $(Selector.STICKY_CONTENT).each((index, element) => {
+          const actualMargin = $(element)[0].style.marginRight
+          const calculatedMargin = $(element).css('margin-right')
+          $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
+        })
+
         // Adjust navbar-toggler margin
         $(Selector.NAVBAR_TOGGLER).each((index, element) => {
           const actualMargin = $(element)[0].style.marginRight
@@ -464,8 +472,8 @@ const Modal = (($) => {
         }
       })
 
-      // Restore navbar-toggler margin
-      $(Selector.NAVBAR_TOGGLER).each((index, element) => {
+      // Restore sticky content and navbar-toggler margin
+      $(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`).each((index, element) => {
         const margin = $(element).data('margin-right')
         if (typeof margin !== 'undefined') {
           $(element).css('margin-right', margin).removeData('margin-right')
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 09c3524434..3b028dc100 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -433,6 +433,48 @@ $(function () {
       .bootstrapModal('show')
   })
 
+  QUnit.test('should adjust the inline margin of sticky elements when opening and restore when closing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
+    var originalPadding = $element.css('margin-right')
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        var currentPadding = $element.css('margin-right')
+        assert.strictEqual(currentPadding, originalPadding, 'sticky element margin should be reset after closing')
+        $element.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        var expectedPadding = parseFloat(originalPadding) - $(this).getScrollbarWidth() + 'px'
+        var currentPadding = $element.css('margin-right')
+        assert.strictEqual(currentPadding, expectedPadding, 'sticky element margin should be adjusted while opening')
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should store the original margin of sticky elements in data-margin-right before showing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
+    var originalPadding = '0px'
+    $element.css('margin-right', originalPadding)
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
+        $element.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        assert.strictEqual($element.data('margin-right'), originalPadding, 'original sticky element margin should be stored in data-margin-right')
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
   QUnit.test('should adjust the inline margin of the navbar-toggler when opening and restore when closing', function (assert) {
     assert.expect(2)
     var done = assert.async()