Content overlaps in StatusBar when without Toolbar

Ionic Framework
1

Hello,

I’m facing a small problem and I can’t believe I don’t find a clean solution for this when browsing the forum (maybe my search queries are all wrong?).

I’m building an app with Ionic, React and Capacitor and I have some components for which I don’t have a IonHeader.
When this is the case, on iOS (I have not yet checked on Android) the content goes straight into the StatusBar.

Expected behaviour: Keep the StatusBar as it is, and the content should come under.

What am I missing?

   <IonPage>
      <IonContent>
        <IonGrid class="ion-no-padding">
          <IonRow>
            <IonCol>
              <img
                src="{src}"
                alt=""
               />
             </IonCol>
           </IonRow>
          <IonRow>
            <IonCol>
             Some more content
             </IonCol>
           </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>

I understand that the ion-no-padding removes some space however even with it, the content is touching it.

Isn’t there an element that can just replace the <IonHeader> to make sure the StatusBar is “safe”?

Thanks in advance.