Is this a regression?
The previous version in which this bug was not present was
No response
Description
Description
On devices with a viewport height below ~380px, the Angular Material Datepicker (touch UI) overflows vertically for certain months.
Some day cells are rendered outside the visible bounds of the datepicker dialog, making content partially hidden or clipped.
This primarily affects small-height devices (320–360px height) and occurs depending on the month layout (e.g. months with 6 weeks).
The issue impacts usability and accessibility, as users cannot clearly see or interact with all dates.
Reproduction
Steps to reproduce:
Open an Angular Material Datepicker using touchUi: true
Emulate a device or resize the viewport to ≤ 360px height
Open the Datepicker
Navigate to months requiring 6 rows (e.g. August, October, December in certain years)
Observe date cells overflowing outside the dialog boundaries
Expected Behavior
The touch Datepicker should:
Adapt to small viewport heights (320–360px)
Ensure all days remain fully visible within the dialog
Prevent content overflow, clipping, or inaccessible dates
Actual Behavior
Day rows overflow outside the Datepicker container
Some dates are partially or fully cut off
The dialog does not resize or scroll to accommodate constrained heights
Behavior varies by month depending on row count
Environment
- Angular: 20.x
- CDK/Material: 20.x
Browser(s): Chrome, Safari (mobile simulation)
Operating System: iOS, Android, macOS (device emulation)
Is this a regression?
The previous version in which this bug was not present was
No response
Description
Description
On devices with a viewport height below ~380px, the Angular Material Datepicker (touch UI) overflows vertically for certain months.
Some day cells are rendered outside the visible bounds of the datepicker dialog, making content partially hidden or clipped.
This primarily affects small-height devices (320–360px height) and occurs depending on the month layout (e.g. months with 6 weeks).
The issue impacts usability and accessibility, as users cannot clearly see or interact with all dates.
Reproduction
Steps to reproduce:
Open an Angular Material Datepicker using touchUi: true
Emulate a device or resize the viewport to ≤ 360px height
Open the Datepicker
Navigate to months requiring 6 rows (e.g. August, October, December in certain years)
Observe date cells overflowing outside the dialog boundaries
Expected Behavior
The touch Datepicker should:
Adapt to small viewport heights (320–360px)
Ensure all days remain fully visible within the dialog
Prevent content overflow, clipping, or inaccessible dates
Actual Behavior
Day rows overflow outside the Datepicker container
Some dates are partially or fully cut off
The dialog does not resize or scroll to accommodate constrained heights
Behavior varies by month depending on row count
Environment
Browser(s): Chrome, Safari (mobile simulation)
Operating System: iOS, Android, macOS (device emulation)