[Bug] Code App iframe uses `100vh` which includes Android nav bar, causing bottom content to be hidden

[emibanana]

Summary

The Power Platform shell sets .player-shell-content { height: calc(100vh) }, which
sizes the iframe to the layout viewport height. On Android Chrome, 100vh includes
the persistent bottom navigation bar (~71px), which physically overlays the WebView.
The iframe is genuinely that tall, but the bottom portion is hidden behind the nav bar
with no way for code inside the iframe to detect it.

Environment

• Device: Android 10, Chrome 148
• screen.height: 780px
• window.outerHeight: 780px
• window.innerHeight: 747px (= 100vh, includes nav bar overlay)
• visualViewport.height: 747px (also reports layout viewport)
• Actual visible height: ~676px (747 − ~71px nav bar)
• devicePixelRatio: 3

Root Cause

.player-shell-content {
height: calc(100vh); /* ← layout viewport, includes Android bottom nav bar */
...
}

On Android Chrome, 100vh = layout viewport = includes the bottom navigation bar.
The browser draws the nav bar on top of the WebView without reducing innerHeight
or visualViewport.height. No JS API inside the iframe reports the true visible height.

The chain:

.player-shell-content { height: 100vh } → 747px

<iframe height="100%"> → 747px (genuinely 747px tall) window.innerHeight → 747px (correct for the iframe) visualViewport.height → 747px (Chrome only adjusts for keyboard) Actual visible area → ~676px (71px hidden behind nav bar)

Proposed Fix

Change the shell CSS to use dvh (dynamic viewport height), which is specifically
designed to exclude persistent browser chrome:

.player-shell-content {
height: 100dvh; /* excludes Android nav bar, iOS home indicator, etc. */
}

Workaround (for app developers until fixed)

Developers must hardcode per-device bottom offsets as CSS custom properties seeded
by user-agent heuristics. This is brittle and requires manual updates per device/OS.

[eschavez]

Thanks for the detailed report and the exact viewport measurements — that's very helpful.

You've correctly identified the root cause: the Play shell currently uses height: calc(100vh) on .player-shell-content, which maps to the layout viewport (the full screen height including the Android system nav bar overlay). On Android Chrome, 100vh ≠ the actual visible area, so your app is rendered behind the nav bar with no way to detect or recover from it.

This is closely related to #327, which we're already investigating (Android bottom nav rendering below the visible viewport). We'll track them together and look at replacing the 100vh sizing with either 100dvh (dynamic viewport height, supported in Chrome 108+) or a JS-driven CSS variable approach for broader compatibility.

We'll keep both issues updated as we make progress — appreciate the precise environment details.