UX: modal > remove obsolete wrapper class (#24381)

app/assets/javascripts/discourse/app/components/d-modal.hbs

@@ -17,84 +17,83 @@
     {{will-destroy this.cleanupListeners}}
     {{trap-tab preventScroll=false}}
   >
-    <div class="d-modal__wrapper">
-      <div class="d-modal__container">
-        {{yield to="aboveHeader"}}
 
-        {{#if
+    <div class="d-modal__container">
-          (and
+      {{yield to="aboveHeader"}}
-            (not @hideHeader)
+
-            (or
+      {{#if
-              this.dismissable
+        (and
-              @title
+          (not @hideHeader)
-              (has-block "headerBelowTitle")
+          (or
-              (has-block "headerAboveTitle")
+            this.dismissable
-            )
+            @title
+            (has-block "headerBelowTitle")
+            (has-block "headerAboveTitle")
           )
-        }}
+        )
-          <div class={{concat-class "d-modal__header" @headerClass}}>
+      }}
+        <div class={{concat-class "d-modal__header" @headerClass}}>
 
-            {{yield to="headerAboveTitle"}}
+          {{yield to="headerAboveTitle"}}
 
-            {{#if @title}}
+          {{#if @title}}
-              <div class="d-modal__title">
+            <div class="d-modal__title">
-                <h3
+              <h3
-                  id="discourse-modal-title"
+                id="discourse-modal-title"
-                  class="d-modal__title-text"
+                class="d-modal__title-text"
-                >{{@title}}</h3>
+              >{{@title}}</h3>
 
-                {{#if @subtitle}}
+              {{#if @subtitle}}
-                  <p class="d-modal__subtitle-text">{{@subtitle}}</p>
+                <p class="d-modal__subtitle-text">{{@subtitle}}</p>
-                {{/if}}
+              {{/if}}
 
-                {{yield to="belowModalTitle"}}
+              {{yield to="belowModalTitle"}}
-              </div>
+            </div>
-            {{/if}}
+          {{/if}}
-            {{yield to="headerBelowTitle"}}
+          {{yield to="headerBelowTitle"}}
 
-            {{#if this.dismissable}}
+          {{#if this.dismissable}}
-              <DButton
+            <DButton
-                @icon="times"
+              @icon="times"
-                @action={{this.handleCloseButton}}
+              @action={{this.handleCloseButton}}
-                @title="modal.close"
+              @title="modal.close"
-                class="btn-flat modal-close"
+              class="btn-flat modal-close"
-              />
+            />
-            {{/if}}
-          </div>
-        {{/if}}
-
-        {{yield to="belowHeader"}}
-
-        {{this.validateFlashType @flashType}}
-        {{#if @flash}}
-          <div
-            id="modal-alert"
-            role="alert"
-            class={{concat-class
-              "alert"
-              (if @flashType (concat "alert-" @flashType))
-            }}
-          >
-            {{~@flash~}}
-          </div>
-        {{/if}}
-
-        <div class={{concat-class "d-modal__body" @bodyClass}} tabindex="-1">
-          {{#if (has-block "body")}}
-            {{yield to="body"}}
-          {{else}}
-            {{yield}}
           {{/if}}
         </div>
+      {{/if}}
 
-        {{#if (has-block "footer")}}
+      {{yield to="belowHeader"}}
-          <div class="d-modal__footer">
+
-            {{yield to="footer"}}
+      {{this.validateFlashType @flashType}}
-          </div>
+      {{#if @flash}}
+        <div
+          id="modal-alert"
+          role="alert"
+          class={{concat-class
+            "alert"
+            (if @flashType (concat "alert-" @flashType))
+          }}
+        >
+          {{~@flash~}}
+        </div>
+      {{/if}}
+
+      <div class={{concat-class "d-modal__body" @bodyClass}} tabindex="-1">
+        {{#if (has-block "body")}}
+          {{yield to="body"}}
+        {{else}}
+          {{yield}}
         {{/if}}
-
-        {{yield to="belowFooter"}}
       </div>
+
+      {{#if (has-block "footer")}}
+        <div class="d-modal__footer">
+          {{yield to="footer"}}
+        </div>
+      {{/if}}
+
+      {{yield to="belowFooter"}}
     </div>
   </this.dynamicElement>
   {{#unless @inline}}

app/assets/stylesheets/common/base/modal.scss

@@ -3,23 +3,21 @@
 .d-modal {
   pointer-events: none; // Allow clicks through wrappers so they hit the adjacent backdrop element
 
-  &__wrapper {
+  display: flex;
-    display: flex;
+  align-items: center;
-    align-items: center;
+  width: 100%;
-    width: 100%;
+  height: 100%;
-    height: 100%;
+  position: fixed;
-    position: fixed;
+  top: 0;
-    top: 0;
+  z-index: z("modal", "content");
-    z-index: z("modal", "content");
+  overflow: auto;
-    overflow: auto;
 
-    .-inline & {
+  &.-inline {
-      position: relative;
+    position: relative;
-    }
+  }
 
-    html.keyboard-visible body.ios-safari-composer-hacks & {
+  html.keyboard-visible body.ios-safari-composer-hacks & {
-      height: calc(var(--composer-vh, 1vh) * 100);
+    height: calc(var(--composer-vh, 1vh) * 100);
-    }
   }
 
   &__container {

app/assets/stylesheets/common/modal/modal-overrides.scss

@@ -266,9 +266,7 @@
 
 .d-modal.chat-modal-new-message {
   .d-modal {
-    &__wrapper {
+    align-items: flex-start;
-      align-items: flex-start;
-    }
     &__container {
       width: var(--modal-max-width);
       margin-top: 1rem;

app/assets/stylesheets/mobile/modal.scss

@@ -5,9 +5,6 @@
     width: 100%;
     max-width: 100%;
   }
-  .modal-inner-container {
-    width: 100%;
-  }
 }
 
 //legacy

spec/system/page_objects/modals/base.rb

@@ -25,7 +25,7 @@ module PageObjects
       end
 
       def click_outside
-        find(".d-modal__wrapper").click(x: 0, y: 0)
+        find(".d-modal").click(x: 0, y: 0)
       end
 
       def click_primary_button