Enable wrapping for elements in .modal-footer (#25103)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 9942678ae8cfdbfae796df62ed7b0efe524d8431..bc08617c95cfa5a1d5720d425306fb804eb9e53d 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -166,15 +166,20 @@
 // Footer (for actions)
 .modal-footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding;
+  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
-  // Easily place margin between footer elements
-  > :not(:first-child) { margin-left: .25rem; }
-  > :not(:last-child) { margin-right: .25rem; }
+  // Place margin between footer elements
+  // This solution is far from ideal because of the universal selector usage,
+  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+  // stylelint-disable-next-line selector-max-universal
+  > * {
+    margin: $modal-footer-margin-between / 2;
+  }
 }
 
 // Measure scrollbar width for padding body during modal show/hide

diff --git a/scss/_variables.scss b/scss/_variables.scss
index cd8997e75581dafdf74c021418d7c387bf61c9a6..5a271b08a9166830aba3d22f5a4910eddf93aba2 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -933,6 +933,9 @@ $badge-border-radius:               $border-radius !default;
 // Padding applied to the modal body
 $modal-inner-padding:               1rem !default;
 
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between:       .5rem !default;
+
 $modal-dialog-margin:               .5rem !default;
 $modal-dialog-margin-y-sm-up:       1.75rem !default;