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

リンクされた最小再現から始め、iOS 15 を搭載した iPhone 7 または iPhone 8 で、縦向きから横向きに回転させてダイアログを再現します。アクションボタン周辺の platform-browser と Material のダイアログの動作を追跡します。横向きモードでボタンが表示されたままになり、下部の空白がなくなれば完了です。

索引モデルが issue の本文から書いたものです。