🤖 fix: iPadOS PWA keyboard accessory bar layout shift

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"
     />
     <meta name="description" content="Parallel agentic development with Electron + React" />
     <meta name="theme-color" content="#1e1e1e" />
@@ -19,7 +19,8 @@
         background: var(--color-background, #1e1e1e);
       }
       #root {
-        height: 100vh;
+        height: 100vh; /* fallback for older browsers */
+        height: 100dvh;
         overflow: hidden;
       }
     </style>

src/browser/components/VimTextArea.tsx

@@ -219,6 +219,8 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             autoCorrect="off"
             autoCapitalize="none"
             autoComplete="off"
+            // Optimize for iPadOS/iOS keyboard behavior
+            enterKeyHint="send"
             {...rest}
             style={{
               ...(rest.style ?? {}),

src/browser/styles/globals.css

@@ -584,6 +584,47 @@ body,
 
 
 /* Tailwind utility extensions for dark theme surfaces */
+/*
+ * iPadOS/iOS keyboard accessory bar fix
+ *
+ * On iPadOS with external keyboard (and iOS with software keyboard),
+ * Safari shows an input accessory bar above the keyboard containing
+ * language switch, form navigation arrows, and microphone/dictation.
+ * This bar can cause layout shifts when focusing inputs.
+ *
+ * The visual viewport API tracks the actual visible area excluding
+ * system UI like keyboard accessory bars. We use CSS environment
+ * variables to handle safe areas and ensure content stays visible.
+ */
+
+/* Ensure the app uses the full viewport height accounting for browser chrome */
+html,
+body,
+#root {
+  /* Use dvh (dynamic viewport height) on supported browsers - this accounts for
+     mobile browser chrome and keyboard accessory bars */
+  min-height: 100dvh;
+  /* Fallback for older browsers */
+  min-height: 100vh;
+}
+
+/* Handle safe areas for notched devices and keyboard accessory bars */
+@supports (padding: env(safe-area-inset-top)) {
+  /* Apply padding to account for iOS safe areas (notch at top, home indicator at bottom) */
+  #root {
+    padding-top: env(safe-area-inset-top, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
+    padding-left: env(safe-area-inset-left, 0);
+    padding-right: env(safe-area-inset-right, 0);
+  }
+}
+
+/* For PWA mode, ensure the viewport meta tag handles the keyboard properly
+   Note: This is a CSS-only solution; the actual fix requires the viewport
+   meta tag to include 'interactive-widget=resizes-content' which is handled
+   in index.html */
+
+
 @utility plan-surface {
   background: var(--surface-plan-gradient);
   border: 1px solid var(--surface-plan-border);