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 28b94a8a2a675a4d314228c86faf71ac4d337761..66875948de18817f25490ac04209e41012c30fcf 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -938,6 +938,9 @@ $badge-pill-border-radius:          10rem !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;