Fix modal overflow style nesting (#26742)

Nest `.modal` styling directly under `.modal-open`
to avoid issues when bootstrap is nested.

diff --git a/scss/_modal.scss b/scss/_modal.scss
index fea8112371de1620af96b72e4dbd29e3830e9610..376c97513970ff7acd9adf4b249e3c581d61d754 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -4,9 +4,14 @@
 // .modal-content   - actual modal w/ bg and corners and stuff
 
 
-// Kill the scroll on the body
 .modal-open {
+  // Kill the scroll on the body
   overflow: hidden;
+
+  .modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 }
 
 // Container that the modal scrolls within
@@ -25,11 +30,6 @@
   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
-
-  .modal-open & {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
 }
 
 // Shell div to position the modal with bottom padding