bug: Action sheet (md) subHeader overlapps the buttons.

[infacto]

Bug Report

Ionic version:
5.x

Current behavior:
The subHeader text overlapps the action buttons.

Expected behavior:
!CurrentBehavior (No overlapping elements.)

Steps to reproduce:

Related code:

const actionSheet = await this.actionSheetCtrl.create({
  header: 'Demo',
  subHeader: 'This is a demo of an action sheet with a sub header.',
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
    },
    {
      text: 'Bug',
      icon: 'bug',
    },
  ],
});

await actionSheet.present();

Other information:
Also see e.g. #17588 (which was closed due to inactivity)...
The ios mode is ok. It only appears in md mode.

Ionic info:

"@ionic/angular": "^5.3.2",
Windows 10
Chrome / Edge (Chromium 90)

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@5.7.0-dev.202105171939.d4827c1

[infacto]

@liamdebeasi Yes fixed. 👍

[liamdebeasi]

Thanks for the issue. This has been resolved via #23318, 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.