writing area dynamic for phones

src/App.css

@@ -5,7 +5,7 @@
    ============================ */
 #root {
     width: 100%;
-    height: 100dvh;
+    height: var(--vh, 100dvh);
     overflow: hidden;
     display: flex;
     flex-direction: column;

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)