bug: card modal does not remove safe area padding

[liamdebeasi]

Current behavior:

Opening a card modal in a Cordova/Capacitor app still shows the ion-header with safe area padding

Expected behavior:

Card modals should not have safe area padding applied since they are not near the edge of the screen.

[liamdebeasi]

Ideally we could do something like:

:host(.modal-card) ion-header ion-toolbar:first-of-type {
  padding-top: 0px;
}

but because ion-modal is a scoped component, the header and toolbar get the modal scope classes applied to it which is not desired functionality. The output selector is:

.modal-card.sc-ion-modal-ios-h ion-header.sc-ion-modal-ios ion-toolbar.sc-ion-modal-ios:first-of-type (notice the header and toolbar receives .sc-ion-modal-ios)

As a workaround, developers can do the following in their modal's css:

ion-header ion-toolbar:first-of-type {
  padding-top: 0px;
}

[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.