fix(datepicker): make touch UI calendar use 80% of width in portrait (#…

…5943)

mode

src/lib/datepicker/datepicker-content.scss

@@ -14,8 +14,10 @@ $md-datepicker-non-touch-calendar-height: 354px;
 // the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
 // chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
 // scrollbars at smaller sizes.
-$md-datepicker-touch-width: 64vmin;
-$md-datepicker-touch-height: 80vmin;
+$md-datepicker-touch-landscape-width: 64vh;
+$md-datepicker-touch-landscape-height: 80vh;
+$md-datepicker-touch-portrait-width: 80vw;
+$md-datepicker-touch-portrait-height: 100vw;
 $md-datepicker-touch-min-width: 250px;
 $md-datepicker-touch-min-height: 312px;
 $md-datepicker-touch-max-width: 750px;
@@ -46,11 +48,23 @@ $md-datepicker-touch-max-height: 788px;
   margin: -24px;
 
   .mat-calendar {
-    width: $md-datepicker-touch-width;
-    height: $md-datepicker-touch-height;
     min-width: $md-datepicker-touch-min-width;
     min-height: $md-datepicker-touch-min-height;
     max-width: $md-datepicker-touch-max-width;
     max-height: $md-datepicker-touch-max-height;
   }
 }
+
+@media all and (orientation: landscape) {
+  .mat-datepicker-content-touch .mat-calendar {
+    width: $md-datepicker-touch-landscape-width;
+    height: $md-datepicker-touch-landscape-height;
+  }
+}
+
+@media all and (orientation: portrait) {
+  .mat-datepicker-content-touch .mat-calendar {
+    width: $md-datepicker-touch-portrait-width;
+    height: $md-datepicker-touch-portrait-height;
+  }
+}