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;