From c79aa0cdde982b3322376726ce9313082027748d Mon Sep 17 00:00:00 2001
From: Sayri Suarez <sayrisuarez@google.com>
Date: Fri, 24 Sep 2021 06:34:45 -0700
Subject: [PATCH] style(dialog): Adjusting sizing logic for full-screen
 dialogs.

PiperOrigin-RevId: 398717272
---
 packages/mdc-dialog/_mixins.scss | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/mdc-dialog/_mixins.scss b/packages/mdc-dialog/_mixins.scss
index c147faf3d61..030188f7090 100644
--- a/packages/mdc-dialog/_mixins.scss
+++ b/packages/mdc-dialog/_mixins.scss
@@ -735,11 +735,17 @@
 @mixin _fullscreen-dialog-size($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
   .mdc-dialog__surface {
+    @include feature-targeting.targets($feat-structure) {
+      // Reset the max-width so the default dialog sizing doesn't interfere with
+      // the full-screen dialog sizing.
+      max-width: none;
+    }
+
     // Medium screens
-    @media (max-width: 960px) and (max-height: 1440px) {
+    @media (max-width: 960px) {
       @include feature-targeting.targets($feat-structure) {
         max-height: 560px;
-        max-width: 560px;
+        width: 560px;
         @include _modal-header(
           $close-icon-padding: variables.$close-icon-padding
         );
@@ -747,7 +753,7 @@
     }
 
     // Small screens
-    @media (max-width: 720px) and (max-height: 1023px) {
+    @media (max-width: 720px) {
       @include feature-targeting.targets($feat-structure) {
         $max-small-height: 560px;
         $max-small-width: 560px;
@@ -773,7 +779,7 @@
         height: 100%;
         max-height: 100vh;
         max-width: 100vw;
-        width: 100%;
+        width: 100vw;
         @include _fullscreen-header(
           $close-icon-padding: variables.$close-icon-padding,
           $title-side-padding: variables.$title-side-padding
@@ -782,8 +788,8 @@
       @include shape-mixins.radius(0, $query: $query);
     }
 
-    // X-Small Screens (vertical)
-    @media (max-width: 600px) and (max-height: 960px) {
+    // X-Small Screens
+    @media (max-width: 600px) {
       @include feature-targeting.targets($feat-structure) {
         // Use 100% instead of vw/vh so the url bar is taken into account on
         // mobile.
@@ -800,10 +806,10 @@
     }
 
     // Large to X-Large screens
-    @media (min-width: 960px) and (min-height: 1440px) {
+    @media (min-width: 960px) {
       @include feature-targeting.targets($feat-structure) {
         $min-horizontal-margin: 200px;
-        max-width: calc(100vw - #{$min-horizontal-margin * 2});
+        width: calc(100vw - #{$min-horizontal-margin * 2});
         @include _modal-header(
           $close-icon-padding: variables.$close-icon-padding
         );
@@ -828,10 +834,10 @@
   $max-width-breakpoint: $max-width + ($horizontal-margin * 2);
 
   @media (max-width: $max-width-breakpoint) {
-    max-width: $max-width-calc-expr;
+    width: $max-width-calc-expr;
   }
   @media (min-width: $max-width-breakpoint) {
-    max-width: $max-width;
+    width: $max-width;
   }
 
   $max-height-calc-expr: calc(100vh - #{$vertical-margin * 2});