From 18d811da04fc88422c8fd9504732884da5933934 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 14 Mar 2026 12:15:04 +0000
Subject: [PATCH] fix: add fallback bottom padding for Android PWA keyboard
 clipping

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 mode.

Add a @media (display-mode: standalone) rule that ensures a minimum
12px bottom padding via max(env(safe-area-inset-bottom), 12px). On iOS
where the inset is already correct (e.g. 34px), max() picks the larger
value so nothing changes.
---
 frontend/src/style.css  | 8 ++++++++
 webapp/static/style.css | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 7b176bc6..5dbc5a6e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -71,6 +71,14 @@
     padding-bottom: env(safe-area-inset-bottom);
 }
 
+/* Android PWA: gesture bar overlaps app but env(safe-area-inset-bottom) is 0,
+   so add fallback bottom padding in standalone mode to prevent keyboard clipping */
+@media (display-mode: standalone) {
+    .safe-area-inset {
+        padding-bottom: max(env(safe-area-inset-bottom), 12px);
+    }
+}
+
 /* PWA Install Banner */
 .pwa-install-banner {
     position: fixed;
diff --git a/webapp/static/style.css b/webapp/static/style.css
index e37b492f..da0070f4 100644
--- a/webapp/static/style.css
+++ b/webapp/static/style.css
@@ -17,6 +17,14 @@ button, .key, input, a {
     padding-bottom: env(safe-area-inset-bottom);
 }
 
+/* Android PWA: gesture bar overlaps app but env(safe-area-inset-bottom) is 0,
+   so add fallback bottom padding in standalone mode to prevent keyboard clipping */
+@media (display-mode: standalone) {
+    .safe-area-inset {
+        padding-bottom: max(env(safe-area-inset-bottom), 12px);
+    }
+}
+
 /* Keyboard key styles */
 .key {
     background-color: #d3d6da;