fix(material/datepicker): content overflowing when large custom heade…

…r is provided (#24255)

* fix(material/datepicker): content overflowing when large custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This is because of the fixed height provided is not enough with custom headers, so added a new class which will set the height of calendar to auto when custom header is given.

Fixes #20459

* fix(material/datepicker): content overflowing when large custom header is provided

    Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit adds comments for the changes done for this bug.

    Fixes #20459

* fix(material/datepicker): content overflowing when large custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit updates the html to use plain class instead of ngClass and removes the $non-touch-custom-header-calendar-height scss variable.

Fixes #20459

(cherry picked from commit 1933225)

src/material/datepicker/datepicker-content.html

@@ -1,6 +1,7 @@
 <div
   cdkTrapFocus
   class="mat-datepicker-content-container"
+  [class.mat-datepicker-content-container-with-custom-header]="datepicker.calendarHeaderComponent"
   [class.mat-datepicker-content-container-with-actions]="_actionsPortal">
   <mat-calendar
     [id]="datepicker.id"

src/material/datepicker/datepicker-content.scss

@@ -31,6 +31,13 @@ $touch-max-height: 788px;
     height: $non-touch-calendar-height;
   }
 
+  // Override mat-calendar's height when custom header is provided
+  // Height should be auto, when the custom header is provided.
+  // This will prevent the content from overflowing.
+  .mat-datepicker-content-container-with-custom-header .mat-calendar {
+    height: auto;
+  }
+
   // Note that this selector doesn't technically have to be nested, but we want the slightly
   // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
   .mat-datepicker-close-button {