fix(cdk/dialog): add container structural styles (#24905)

Currently the CDK dialog container doesn't come with any styles which means that it's `display: inline`, making it difficult to change its size. These changes add a handful of styles to make it match the specified size in the config.

Author: crisbeto

src/cdk/dialog/BUILD.bazel

@@ -4,6 +4,7 @@ load(
     "ng_module",
     "ng_test_library",
     "ng_web_test_suite",
+    "sass_binary",
 )
 
 package(default_visibility = ["//visibility:public"])
@@ -14,7 +15,7 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    assets = glob(["**/*.html"]),
+    assets = [":dialog-container.css"] + glob(["**/*.html"]),
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",
@@ -61,3 +62,8 @@ filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
 )
+
+sass_binary(
+    name = "dialog_container_scss",
+    src = "dialog-container.scss",
+)

src/cdk/dialog/dialog-container.scss

@@ -0,0 +1,13 @@
+.cdk-dialog-container {
+  // The container is a custom node so it'll be `display: inline` by default.
+  display: block;
+
+  // The dialog container should completely fill its parent overlay element.
+  width: 100%;
+  height: 100%;
+
+  // Since the dialog won't stretch to fit the parent, if the height
+  // isn't set, we have to inherit the min and max values explicitly.
+  min-height: inherit;
+  max-height: inherit;
+}

src/cdk/dialog/dialog-container.ts

@@ -49,6 +49,7 @@ export function throwDialogContentAlreadyAttachedError() {
 @Component({
   selector: 'cdk-dialog-container',
   templateUrl: './dialog-container.html',
+  styleUrls: ['dialog-container.css'],
   encapsulation: ViewEncapsulation.None,
   // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
   // tslint:disable-next-line:validate-decorators

src/dev-app/cdk-dialog/dialog-demo.scss

@@ -1,9 +1,3 @@
-.demo-cdk-dialog {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-}
-
 .demo-container {
   button, label {
     margin-right: 8px;

src/dev-app/cdk-dialog/dialog-demo.ts

@@ -75,8 +75,24 @@ export class DialogDemo {
       <button (click)="temporarilyHide()">Hide for 2 seconds</button>
     </div>
   `,
-  encapsulation: ViewEncapsulation.None,
-  styles: [`.hidden-dialog { opacity: 0; }`],
+  styles: [
+    `
+    :host {
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-width: inherit;
+      min-height: inherit;
+    }
+
+    :host-context(.hidden-dialog) {
+      opacity: 0;
+    }
+  `,
+  ],
   standalone: true,
 })
 export class JazzDialog {