fix(material/dialog): css structure change

* change the css structure of the dialog surface and it's children

Author: wagnermaciel

src/material/dialog/_mdc-dialog-structure-overrides.scss

@@ -38,19 +38,18 @@
       max-width: inherit;
     }
 
-    // MDC by default sets the `surface` to `display: flex`. MDC does this in order to
-    // be able to make the content scrollable while locking the title and actions. This
-    // does not work in our dialog anyway because due to the content projection, arbitrary
-    // components can be immediate children of the surface and make this a noop. If only
-    // templates or DOM elements are projected, the flex display could cause unexpected
-    // alignment issues as explained in our coding standards (see `CODING_STANDARDS.md`).
-    // Additionally, the surface by default should expand based on the parent overlay
-    // boundaries (so that boundaries for the overlay config are respected). The surface
-    // by default would only expand based on its content.
     .mdc-dialog__surface {
-      display: block;
       width: 100%;
       height: 100%;
     }
+
+    // MDC sets the `surface` to `display: flex`. MDC does this in order to be able to make the
+    // content scrollable while locking the title and actions. This only works in our dialog if we
+    // set the children of the `surface` to `display: contents`. This is because, due to content
+    // projection, arbitrary components can be immediate children of the surface and make this a
+    // noop.
+    .mat-mdc-dialog-surface > * {
+      display: contents;
+    }
   }
 }