From 0d3ef74878384123d70ec9e776e0d0a6e1654ba9 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 30 Nov 2025 14:23:07 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A4=96=20fix:=20iPadOS=20PWA=20keyboa?=
 =?UTF-8?q?rd=20accessory=20bar=20layout=20shift?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On iPadOS 26 with external keyboard in PWA mode, Safari shows an input
accessory bar (language switch, up/down arrows, microphone) that can
cause layout shifts when focusing the chat input.

Changes:
- Add viewport-fit=cover to viewport meta for safe area inset support
- Use 100dvh (dynamic viewport height) to account for browser chrome
  and keyboard bars, with 100vh fallback for older browsers
- Add CSS env() safe-area-inset handling for notched devices
- Add enterKeyHint="send" to textarea for better mobile keyboard UX
- Add comprehensive comments explaining the iOS/iPadOS keyboard behavior

The dvh unit automatically adjusts when the keyboard accessory bar
appears/disappears, preventing the chat input from being pushed around.

_Generated with `mux`_
---
 index.html                             |  5 ++--
 src/browser/components/VimTextArea.tsx |  2 ++
 src/browser/styles/globals.css         | 38 ++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 464c263822..c277884c3e 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" />
@@ -19,7 +19,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 9e44d868d0..5d1546287a 100644
--- a/src/browser/components/VimTextArea.tsx
+++ b/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 ?? {}),
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index ee0cf3cd52..248add4684 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -584,6 +584,44 @@ 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-bottom: env(safe-area-inset-bottom)) {
+  /* Apply padding to account for iOS safe areas (home indicator, notch) */
+  #root {
+    padding-bottom: env(safe-area-inset-bottom, 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);

From f470d6fa76ee2f28d1cbd6f22c8b084f3a0635e1 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 30 Nov 2025 14:26:19 +0000
Subject: [PATCH 2/2] fix: add all safe-area insets for notch/edge devices

Addresses review feedback - viewport-fit=cover requires handling all
four safe-area insets (top, bottom, left, right) to prevent content
from being obscured by notches, home indicators, or screen edges.
---
 src/browser/styles/globals.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index 248add4684..b3dbad4586 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -609,10 +609,13 @@ body,
 }
 
 /* Handle safe areas for notched devices and keyboard accessory bars */
-@supports (padding-bottom: env(safe-area-inset-bottom)) {
-  /* Apply padding to account for iOS safe areas (home indicator, notch) */
+@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);
   }
 }