fix: Android PWA keyboard bottom row clipping

[Hugo0]

Summary

• On Android PWAs, the system gesture bar overlaps app content but env(safe-area-inset-bottom) reports 0 (unlike iOS which correctly reports safe area insets)
• This causes the bottom keyboard row to be hidden behind the gesture bar in standalone/PWA mode
• Adds a @media (display-mode: standalone) rule with padding-bottom: max(env(safe-area-inset-bottom), 12px) as a fallback
• On iOS where the inset is already correct (e.g. 34px), max() picks the larger value so nothing changes
• Only affects PWA standalone mode — regular browser experience is unchanged

Context

We've gone back and forth between 100svh and 100dvh in recent PRs (#138, commits 0155c09, 6eb3a7d). Neither viewport unit solves this because they account for browser chrome, not the Android system navigation/gesture bar. This fix targets the actual root cause.

Test plan

• Test on Android PWA (Brave) — bottom keyboard row should be fully visible
• Test on Android PWA (Chrome) — same
• Test on iOS PWA — no regression (safe-area-inset-bottom should still win via max())
• Test in regular mobile browser — no change (standalone media query doesn't apply)

@coderabbitai review

Summary by CodeRabbit

• Bug Fixes
  • Fixed keyboard clipping issue when using PWA applications in standalone mode on Android devices by implementing improved viewport padding handling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aa495bb6-52a4-4377-8d02-3273b985b3ab

📥 Commits

Reviewing files that changed from the base of the PR and between c2bab5d and 18d811d.

📒 Files selected for processing (2)

• frontend/src/style.css
• webapp/static/style.css

---

📝 Walkthrough

Walkthrough

Two CSS files receive identical defensive fallback modifications for safe-area-insets in standalone PWA display mode. Each file adds a media query that applies max(env(safe-area-inset-bottom), 12px) padding to the safe-area-inset class, ensuring minimum padding to prevent keyboard clipping on Android devices.

Changes

Cohort / File(s)	Summary
Standalone PWA Safe-Area Fallback frontend/src/style.css, webapp/static/style.css	Added @media (display-mode: standalone) block with padding-bottom: max(env(safe-area-inset-bottom), 12px) to provide defensive 12px fallback when safe-area-inset-bottom is zero on Android gesture navigation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A rabbit hops through pixels bright,
Safe areas now fit just right,
On Android's dance, no keyboards hide,
Twelve pixels guard with fallback pride! 🎨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically identifies the bug fix (keyboard clipping) and the target platform/context (Android PWA), directly matching the changeset's core objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/pwa-android-keyboard-clipping

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}