AppLayout content unreachable on iPhone with Aura theme

[mstahv]

Description

Vaadin: 25.1.0 | Theme: Aura | Device: iPhone (Safari)

When AppLayout uses drawer mode (addToNavbar(true, ...)), the content area doesn't scroll fully on iPhone. Bottom elements (e.g. a payment button) are permanently hidden behind the layout chrome. Works correctly with Lumo theme.

Reproducer

@Route
public class MainView extends VerticalLayout {

    @Layout
    static class MyLayout extends AppLayout {{
        addToNavbar(true, new Paragraph("This is my navbar"));
        addToDrawer(new Paragraph("Menu"));
    }}

    public MainView() {
        add("Long content that requires scrolling on mobile:");
        for (int i = 0; i < 10; i++) {
            add(new Paragraph("filler content"));
        }
        add(new Button("Click me (if you can)",
                event -> add(new Paragraph("Clicked!"))));
    }
}

Expected

All content is scrollable and reachable on iPhone.

Actual

Bottom of the content is cut off; buttons at the end of the view cannot be tapped.

Workaround

Use Lumo theme instead of Aura.

Expected outcome

Minimal reproducible example

Steps to reproduce

Environment

Vaadin version(s):
OS:

Browsers

No response

[DiegoCardoso]

The issue comes from this line in the AppLayout's Aura theme styles. It doesn't take into account the --_vaadin-app-layout-navbar-offset-size-bottom value that both Lumo and Base styles use as the padding-bottom of the layout.

It would work as expected if it used something like this instead:

padding-bottom: max(var(--_vaadin-app-layout-navbar-offset-size-bottom), var(--aura-app-layout-inset))

Before	After

[mstahv]

👍 Added this now as a workaround and it seems to work (the only style rule i have for this app, so bit sad that I had to create styles.css...):

vaadin-app-layout {
    padding-bottom: max(var(--_vaadin-app-layout-navbar-offset-size-bottom), var(--aura-app-layout-inset));
}

[yuriy-fix]

We should probably proceed with introducing a new part for the content area and set padding on that one.
@jouni could you please create and link relevant issue?