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,21 @@
       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%;
     }
   }
+
+  // When a component is passed into the dialog, the host element interrupts
+  // the `display:flex` from affecting the dialog title, content, and
+  // actions. To fix this, we make the component host `display: contents` by
+  // marking it's panel with the `mat-mdc-dialog-component-panel` class.
+  //
+  // Note that this problem does not exist when a template ref is used since
+  // the title, contents, and actions are then nested directly under the
+  // dialog surface.
+  .mat-mdc-dialog-component-panel .mat-mdc-dialog-surface > * {
+    display: contents;
+  }
 }

src/material/dialog/dialog.ts

@@ -162,6 +162,18 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
     config.id = config.id || `${this._idPrefix}${uniqueId++}`;
     config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
 
+    // When a component is passed into the dialog, the host element interrupts
+    // the `display:flex` from affecting the dialog title, content, and
+    // actions. To fix this, we make the component host `display: contents` by
+    // marking it's panel with the `mat-mdc-dialog-component-panel` class.
+    //
+    // Note that this problem does not exist when a template ref is used since
+    // the title, contents, and actions are then nested directly under the
+    // dialog surface.
+    if (!(componentOrTemplateRef instanceof TemplateRef)) {
+      this._appendPanelClass(config, 'mat-mdc-dialog-component-panel');
+    }
+
     const cdkRef = this._dialog.open<R, D, T>(componentOrTemplateRef, {
       ...config,
       positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
@@ -249,6 +261,17 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
       dialogs[i].close();
     }
   }
+
+  /** Appends the given class name to the panel via the dialog config. */
+  private _appendPanelClass(config: MatDialogConfig, className: string) {
+    if (Array.isArray(config.panelClass)) {
+      config.panelClass.push(className);
+    } else if (typeof config.panelClass === 'string') {
+      config.panelClass = [config.panelClass, className];
+    } else {
+      config.panelClass = className;
+    }
+  }
 }
 
 /**