fix(SystemBars): make safe-area-inset-x available on API <= 34

[theproducer]

Description

This PR makes the custom injected safe-area-inset-x CSS variables available for Android devices on API <= 34, to make dealing with UI safe area logic more consistent across Android versions.

Change Type

• Fix
• Feature
• Refactor
• Breaking Change
• Documentation

Rationale / Problems Fixed

fixes: #8394

Tests or Reproductions

Screenshots / Media

Platforms Affected

• Android
• iOS
• Web

Notes / Comments

[djabif]

Hi, thanks for this PR.
Looking forward to this merge 🙏🏻

[luisbytes]

I’m a bit concerned this last commit might clash with other plugins, like @capacitor-community/admob. I’ve been testing locally on Android <=14 (WebView < 140) and it works fine at first, but once the WebView updates, the banner gets hidden behind the navigation bar. This wasn't happening before this PR, so I feel like this change could lead to some serious compatibility issues with other plugins.

Android 14 Webview < 140	Android 14 Webview >= 140

[theproducer]

@luisbytes Do you have a test app that I can play around with and test some changes against?

[luisbytes]

@theproducer
Hi, I've been a bit busy. I'll leave a repo tonight. I'll apply the patch from this PR with pnpm.

[luisbytes]

@theproducer Upon reviewing, I noticed that the AdMob plugin adds padding based on the safe area, but only for Android 15+.

This leaves me wondering how plugins that need to display something natively on screen should handle the safe area: based on the WebView version or the Android version?

I'll also leave a Playground repository. I encountered more problems with the AdMob plugin on Android 15 and 16 with WebViews lower than 140 (it works fine in the latest WebView versions). The cause is this pull request: #8384. Downgrading to 8.2.0 fixes it.

In conclusion, I believe this pull request can be merged, but guidelines or suggestions should be established for plugins that want to display native objects on WebViews. For now, I applied this patch to the patch/admob branch of the admob plugin, adding native padding based on the webview version, just like the systembars plugin currently does. I tested it on Android 11, 14, 15, and 16 with Webview <140 and >140, and it works fine.

I'm considering whether to submit a PR to the AdMob plugin if these changes are mixed, applying padding based on the webview version.