bug: action-sheet does not respect --ion-safe-area-bottom in mode: 'md'

[lincolnthree]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When displaying action sheet on devices where --ion-safe-area-bottom has a value, and the mode is 'md', the action sheet overlaps the safe area and does not apply appropriate padding to the bottom button:

Expected Behavior

The action-sheet should respect the safe area:

Steps to Reproduce

Just display any action-sheet in MD mode and change the value of --ion-safe-area-bottom. This can be reproduced even in the ionic docs themselves. See code repro URL.

Code Reproduction URL

https://ionicframework.com/docs/demos/api/action-sheet/index.html?ionic:mode=md

Ionic Info

Version 5x and whatever version the ionic docs are running.

Ionic:

Ionic CLI : 6.17.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.8.5
@angular-devkit/build-angular : 13.0.1
@angular-devkit/schematics : 13.0.1
@angular/cli : 13.0.1
@ionic/angular-toolkit : 5.0.3

Additional Information

The last child of the action-sheet should have padding applied to its bottom:

.action-sheet-group.sc-ion-action-sheet-md:last-child {
    padding-bottom: 0;
    padding-bottom: var(--ion-safe-area-bottom);
}

[liamdebeasi]

Thanks for the issue. This has been resolved via #24176, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.