bug(datepicker): calendar popup overflows with WCAG text spacing enabled

[zarend]

Description

When text spacing is enabled (WCAG 1.4.12) the popup for the calendar overflows a little bit.

Reproduction

Steps to reproduce:

1. Enable WCAG text spacing
2. open https://material.angular.io/components/datepicker/examples
3. navigate to "Basic Datepicker" example
4. Click the calendar icon to open the popup

Expected Behavior

text is not cutoff

Actual Behavior

text is cutoff in months with 6 rows of dates

[zarend]

This is more of a cosmetic issue than a significant a11y issue.

The datepicker sets a constant height of 354px

// Based on the natural height of the calendar in a month with 6 rows of dates
// (largest the calendar will get).
$non-touch-calendar-height: 354px;

...
  .mat-calendar {
    width: $non-touch-calendar-width;
    height: $non-touch-calendar-height;
  }

This could probably be fixed by using 354px as the min-height and having a slightly larger max-height to accomodate WCAG text spacing

  .mat-calendar {
    width: $non-touch-calendar-width;
    min-height: $non-touch-calendar-height;
    max-height: $non-touch-calendar-wcag-text-spacing-height; // slightly larger that non-touch-calendar height
  }