extends the click area of the close btn on modals (#23783)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index a563e6ffbdd5f2b63f1f3246e208ee7197ad7a38..66f981151a2095befd61e45eec4455e0df87a99e 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -82,13 +82,14 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   display: flex;
-  align-items: center; // vertically center it
+  align-items: flex-start; // so the close btn always stays on the upper right corner
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
 
   .close {
-    margin-left: auto; // Force icon to the right even when there's no .modal-title
+    padding: $modal-header-padding;
+    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; // auto on the left force icon to the right even when there is no .modal-title
   }
 }