Status bar covers part of the application

I have a problem that the status bar covers part of the application, and I would like the status bar to be separate from the application. I use Angular 12 and Capacitor V4, should i use capacitor save-area package? This issue only appear on iphone with notch, on Android, iPad works very well.
This is what the app looks like when you run it

When I minimize the apps and come back again, the app gets a black bar at the top that just separates the apps and I wish it was like this all the time

This is a must read for people creating mobile apps without using some UI framework like Ionic that handles those kind of things for you.

when the phone is vertically positioned to set the spacing from the top only should I use env(safe-area-inset-top) or env(safe-area-inset-left)?