Updat modal sizing

- Switch from width to max-width for all widths to avoid scaling outside viewport bounds
- Rejigger the media queries for a more logical breakpoint for the large and small modal sizes
- Avoids changing the width of the default modal (nullifying #17794 and fixing #17581)

1 files changed, 5 insertions, 5 deletions

diff --git a/scss/_modal.scss b/scss/_modal.scss
index c43d55b5ac..83bb4932be 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -130,17 +130,17 @@
 @include media-breakpoint-up(sm) {
   // Automatically set modal's width for larger viewports
   .modal-dialog {
-    width: $modal-md;
+    max-width: $modal-md;
     margin: 30px auto;
   }
+
   .modal-content {
     @include box-shadow($modal-content-sm-up-box-shadow);
   }
 
-  // Modal sizes
-  .modal-sm { width: $modal-sm; }
+  .modal-sm { max-width: $modal-sm; }
 }
 
-@include media-breakpoint-up(md) {
-  .modal-lg { width: $modal-lg; }
+@include media-breakpoint-up(lg) {
+  .modal-lg { max-width: $modal-lg; }
 }