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

### 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

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

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

```true
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
```

Start with the linked minimal reproduction and reproduce the dialog on iPhone 7 or iPhone 8 running iOS 15, rotating from portrait to landscape. Trace the platform-browser and Material dialog behavior around the action buttons; done means the buttons remain visible and the empty space at the bottom is gone in landscape mode.

Written by the indexing model from the issue text.