Status bar covers part of the application

Capacitor
1

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

jg
jg1920×1200 139 KB

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

Zrzut ekranu 2023-01-25 o 08.28.53
Zrzut ekranu 2023-01-25 o 08.28.531394×1918 126 KB

2

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.

3

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)?