Android status bar overlaps q-header in Capacitor apps - safe area not handled automatically

[Pynman]

What happened?

On Android devices/emulators, the q-header component overlaps with the Android system status bar, making
the toolbar content unreadable. This happens with fresh Quasar installations using Capacitor. The same
layout works perfectly on iOS with automatic safe area handling.

What did you expect to happen?

The q-header should automatically respect Android safe areas and position itself below the system status
bar, similar to how it works correctly on iOS devices.

Reproduction URL

https://github.com/quasarframework/quasar-starter-kit

How to reproduce?

1. Create new Quasar app: npm create quasar@latest test-app
2. Add Capacitor: quasar mode add capacitor
3. Add Android platform: npx cap add android
4. Build for Android: quasar build -m capacitor -T android
5. Run on Android emulator (Pixel 9 Pro API 36) or device
6. Observe q-header overlapping with Android status bar

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Capacitor Mode

Platforms/Browsers

Android

Quasar info output

Operating System - Darwin(24.5.0) - darwin/arm64
  NodeJs - 22.17.0

  Global packages
    NPM - 10.9.2
    yarn - 1.22.22
    @quasar/cli - 2.5.0

  Important local packages
    quasar - 2.18.1
    @quasar/app-vite - 2.2.1
    @quasar/extras - 1.17.0
    vue - 3.5.17
    vue-router - 4.5.1
    pinia - 3.0.3
    vite - 6.3.5
    eslint - 9.30.0
    esbuild - 0.25.5
    @capacitor/core - 7.4.0
    @capacitor/cli - 7.4.0
    @capacitor/android - 7.4.0
    @capacitor/ios - 7.4.0

Relevant log output

No console errors - layout renders but header overlaps status bar visually

Additional context

This affects all new Quasar + Capacitor Android apps by default. I may be missing some configuration, but
this occurs with fresh installations following official docs. If there's a recommended Android safe area
configuration, it should be documented or handled automatically.

[skikrumb-ryan]

Also to note q-footer is also not working and Android swipe handle is visible overtop of the q-footer.

This css seems to work globally for the top padding, bottom doesn't work, but still not working with just a q-header & q-footer as docs suggest.

:root {
  /* Apply globally or to specific elements as needed */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom) // does not work;
}