bug(Datepicker): Confirmation action buttons overflow touchUI dialog

[bederuijter]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When opening a datepicker dialog with touchUI enabled the confirmation action buttons overflow the dialog when the available height is not sufficient. This primarily happens on devices where the available height is less than 400px (approx). It varies per month, depending on the calendar layout.

It is recommended, from an accessibility standpoint, to include confirmation action buttons for a datepicker dialog. At the moment these buttons not provide a clean user experience when use in conjuction with touchUI enabled.

---

I'm aware of #33115 but the fix for that issue does not fix the confirmation action buttons overflowing.

Reproduction

Stackblitz repo

Steps to reproduce:

1. In the stackblitz reproduction open up the preview
2. Simulate a small screen device where the view height is <~400px. (I also used view-width of ~750px)
3. Go to (August 2026)
4. Notice the buttons overflowing vertically.

Expected Behavior

The buttons remain within the dialog and the dialog will not resize itself on smaller screens to no longer fit the buttons.

Actual Behavior

The buttons overflow the dialog vertically

Environment

• Angular: V21.2.19
• CDK/Material: V21.2.12
• Browser(s): Chrome (148.0.7778.215)
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS