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

Beginne mit der verknüpften minimalen Reproduktion und reproduziere den Dialog auf einem iPhone 7 oder iPhone 8 mit iOS 15, indem du vom Hochformat ins Querformat drehst. Verfolge das Verhalten von platform-browser und Material-Dialog rund um die Aktionsschaltflächen. Fertig ist die Aufgabe, wenn die Schaltflächen sichtbar bleiben und der leere Bereich am unteren Rand im Querformat verschwunden ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.