diff --git a/index.html b/index.html
index 817f0309f..5f8cd4bef 100644
--- a/index.html
+++ b/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" />
@@ -20,7 +20,8 @@
         background: var(--color-background, #1e1e1e);
       }
       #root {
-        height: 100vh;
+        height: 100vh; /* fallback for older browsers */
+        height: 100dvh;
         overflow: hidden;
       }
     </style>
diff --git a/src/browser/components/VimTextArea.tsx b/src/browser/components/VimTextArea.tsx
index fc2664ac3..d5798ea1d 100644
--- a/src/browser/components/VimTextArea.tsx
+++ b/src/browser/components/VimTextArea.tsx
@@ -257,6 +257,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 ?? {}),
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index 08fc86b9e..850f41e62 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -1051,6 +1051,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);