style(dialog): Adjusting sizing logic for full-screen dialogs.

PiperOrigin-RevId: 398717272
material-components · Sep 24, 2021 · c79aa0c · c79aa0c
1 parent 65084ba
commit c79aa0c
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/packages/mdc-dialog/_mixins.scss b/packages/mdc-dialog/_mixins.scss
@@ -735,19 +735,25 @@
 @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
         );
       }
     }
 
     // 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});