Unified safe area (insets) for Android and iOS

[Gregman-js]

Proposed change

I noticed minor differences between embedding WebView in iOS and Android.
Now the webview is not drawn under the navigation bar on Android, but on iOS it is.
I want to resolve part of this issue: draw webview under navigation bar on android.
env do not work on android, so I prepared another change for android repo to set --android-safe-area-inset-[...] (variable from this PR) on page load (PR, not required for this PR)
In this way, we can unify safe area on ios and android and create even more immersive views.
With these changes, we can also draw webview under status bar on android and iOS (require future work).
Working POC (left iOS, right android):

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

When Google will fix env support on android webview, we can just change property to env
First commit: new properties
Second commit: I've replaced all occurence of env in code for new properties

• This PR is related to issue or discussion: Make the navigation bar and status bar transparent (edge-to-edge) android#4547
• Android changes Display WebView under navigation bar android#5010

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[home-assistant]

Hi @Gregman-js

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

Stale

[Gregman-js]

As @jpelgrom said in the linked issue. We need to think about how to handle situation where user have updated android app and old server which do not support new css variables yet...

[MindFreeze]

I am a bit concerned by this as var has a different scope than env so we have to test it thoroughly

[marcinbauer85]

Could this also fix the issue on most dialogs and their actions like save/cancel etc?

[Gregman-js]

@marcinbauer85 This PR won't fix this. But I think we need to fix this issue before introducing android changes. It is possible to click this button (on screenshot above) with navigation bar, but it can be impossible to do it with 3 button navigation on android if this view does not respect safe area insets.

[marcinbauer85]

Yes please, that would be great!

[wendevlin]

Hey @Gregman-j,

We had issues in the dev build with your PR, because of that we reverted it.

Please reopen it and try to fix the issues:

• open sidebar overlays content
• missing fab buttions in areas view

We found out that you set --safe-area-inset-left (and the others) in styles.ts but this are styles that need to be explicitly imported by components.

You should add your settings to ha-style.ts to have it set everywhere. Please try and let us know.

[Gregman-js]

New fixed PR: #24689