Header Overlaps with the notification bar in some android devices

Ionic Framework Ionic Angular
1

I am using the latest ionic and capacitor to develop my android app.
I started the live development server after configuration with ionic cap run android -l --external and this is the result of 2 different android phones.

Phone 1: Samsung Galaxy Note 10 Lite (Latest Update)

Samsung Galaxy Note 10 Lite
Samsung Galaxy Note 10 Lite576×393 22.7 KB

Phone 2: Samsung Galaxy Z Flip 5 (Latest Update)

Samsung Galaxy Z Flip 5
Samsung Galaxy Z Flip 5524×453 18.4 KB

You can clearly see that the header in the Note 10 Lite overlaps with the icons in the notification bar, whereas it looks perfect in the Flip 5 phone.
What could be the issue and how to resolve it?
I have tried setting viewport-fit=auto in the meta tag of index.html but nothing changed.

2

Looks to be due to Android’s new Edge-to-Edge feature. See Edge to edge Android - #8 by robingenz

There were some changes in Capacitor 7.1.0 for better support but some people are still reporting some issues