diff --git a/src/App.css b/src/App.css
index e92f2fd..8d0873f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,7 +5,7 @@
    ============================ */
 #root {
     width: 100%;
-    height: 100dvh;
+    height: var(--vh, 100dvh);
     overflow: hidden;
     display: flex;
     flex-direction: column;
diff --git a/src/main.tsx b/src/main.tsx
index d4cee22..365b290 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,6 +4,15 @@ import './index.css'
 import App from './App.tsx'
 import { listenForegroundMessages } from './hooks/useReminder'
 
+// Keep #root height in sync with the visual viewport (shrinks when keyboard opens)
+if (window.visualViewport) {
+  const setVH = () => {
+    document.documentElement.style.setProperty('--vh', `${window.visualViewport!.height}px`)
+  }
+  window.visualViewport.addEventListener('resize', setVH)
+  setVH()
+}
+
 // Apply saved theme immediately to avoid flash
 const savedTheme = localStorage.getItem('gj-theme') || 'light'
 document.documentElement.setAttribute('data-theme', savedTheme)