bug(material/dialog): On Mobile devices, dialog action buttons are cut-off in landscape mode.

[tungnguyen020394]

Which @angular/* package(s) are the source of the bug?

platform-browser

Is this a regression?

No

Description

The dialog box displays on the screen in portrait mode.

rotate device to landscape mode.

In landscape mode, Screen shows an empty space at the bottom of the screen.

Device test: iPhone 7 (15.3), iPhone 8 (15.0)

version: ios 15

Please provide a link to a minimal reproduction of the bug

https://user-images.githubusercontent.com/22971618/163550578-4ce27436-48db-43e4-a3d1-80c345ddf82f.MP4

https://github.com/tungnguyen020394/angular-hq9yn3-zeuzb2

Please provide the exception or error you saw

Screen shows an empty space at the bottom of the screen.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 11.2.19
Node: 16.13.0
OS: win32 x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1102.19
@angular-devkit/build-angular      0.1102.19
@angular-devkit/core               11.2.19
@angular-devkit/schematics         11.2.19
@angular/cdk                       11.2.13
@angular/cli                       11.2.19
@angular/flex-layout               11.0.0-beta.33
@angular/material                  11.2.13
@angular/material-moment-adapter   11.2.13
@schematics/angular                11.2.19
@schematics/update                 0.1102.19
rxjs                               6.6.7
typescript                         4.1.5

[pkozlowski-opensource]

Duplicate of angular/angular#45628 - please make sure that you are providing us enough info to understand and reproduce the issue. As it stands this issue is not actionable.

[tungnguyen020394]

@pkozlowski-opensource I update source code to reproduce this issue. It's a blank source with a dialog.

[pkozlowski-opensource]

Transferring to the components repo as it seems to be the display issue rerated to the Material's dialog

[zarend]

Hello,

I am able to reproduce, but it appears that this is working better than before. Looks like the action buttons on the bottom are getting cut off. Scrolling is working okay.

• iOS 16.6.1
• iPhone 13 mini
• https://material.angular.io/components/dialog/examples#dialog-content

[zarend]

There's accessibility requirements about supporting devices rotating between landscape and portrait mode, so it would be good to fix this issue for accessibility. There's also accessibility requirements for supporting a zoomed in screen and increased font sizes. Adding a11y tag.

I can also reproduce on desktop by making the window small and zooming in to 125%.

The <mat-dialog-content and <mat-dialog-actions are inside a flex container with direction column. The content has a max height of 65vh, and the actions has a min height of 52px On a really small screen, 65vh plus 52px will be more than 100%, which causes the actions to overflow and get cutoff.

It looks to me to fix the flexbox styles so that the actions never get cutoff on really small screen sizes. It seems to work fine on large screen sizes, so we only need to change the behavior for smaller screens.