AppLayout marginals look broken on iPhone 15

[mstahv]

Description

The UX seems to be non-optional when a Vaadin PWA (using AppLayout) is used on modern iPhone. The bottom of the screen is these days rounded and contains the "home swipe icon". Thus the bottom bar has quite little room for view title and buttons/icons. This is not only causing visual issues, but it is also hard to hit the "hamburger icon" in the bottom left corner.

In the attached screenshot it actually looks better than in real life, as the screenshot includes the "hidden pixels" because of rounded screen, but the "home swipe icon" is there. In iPhone, the hamburger icon is right at the edge of the screen and the visible focus ring is cut in half.

Expected outcome

There should be more marginal for iPhones and other modern smartphones with curved screens.

Minimal reproducible example

Create an app from start.vaadin.com with AppLayout.

Steps to reproduce

Create a Vaadin PWA and open in iPhone

Environment

Vaadin version(s): 24.6.0
OS: iOS (latest)

Browsers

Safari on iOS

[yuriy-fix]

We need to check if iphone safe area is calculated properly within app-layout.

[rolfsmeds]

AppLayout should be using the `safe-area-inset-bottom´ environment property to determine how far from the viewport bottom its contents should be. Perhaps that's not working as expected.

Possibly related: safe-area-inset-bottom

[vursen]

I tested the app-layout on iPhone 13 Pro and didn't notice any issues:

ScreenRecording_01-13-2025.14-42-41_1.MP4

Does it look different on iPhone 15?

UPD: My bad, I missed that it required installing the app as a PWA. I can confirm the issue now.

[vursen]

Adding viewport-fit=cover to <meta name="viewport"> seems to fix the issue on iOS.