From 0d27c0b6d57c76ddefc4e1e74ab68a0ef03593d3 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 28 Dec 2025 13:43:53 +0200
Subject: [PATCH] fix: improve keyboard focus handling between inputs for
 mobile view

---
 packages/ui/src/components/chat/ChatInput.tsx    | 2 +-
 packages/ui/src/components/layout/MainLayout.tsx | 7 +++++++
 packages/ui/src/index.css                        | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index c665879c..e3cbb12a 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -996,7 +996,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
 
     return (
 
-        <form onSubmit={handleSubmit} className="pt-0 pb-4 bottom-safe-area">
+        <form onSubmit={handleSubmit} className="pt-0 pb-2 md:pb-4 bottom-safe-area">
             <StatusRow
                 isWorking={working.isWorking}
                 statusText={workingStatusText}
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index 6e358b42..c4b5b447 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -187,6 +187,13 @@ export const MainLayout: React.FC = () => {
             const tagName = target.tagName;
             const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
             if (isInput || target.isContentEditable) {
+                // Check if focus is moving to another input - if so, don't close keyboard
+                const related = event.relatedTarget as HTMLElement | null;
+                const relatedTag = related?.tagName;
+                const relatedIsInput = relatedTag === 'INPUT' || relatedTag === 'TEXTAREA' || relatedTag === 'SELECT' || related?.isContentEditable;
+                if (relatedIsInput) {
+                    return;
+                }
                 forceKeyboardClosed();
             }
         };
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 2224658d..4e0408fd 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1146,7 +1146,7 @@ html:not(.dark) .chat-scroll {
       --oc-safe-area-top: env(safe-area-inset-top, 0);
       --oc-safe-area-right: env(safe-area-inset-right, 0);
       --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
-      --oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
+      --oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
       --oc-safe-area-left: env(safe-area-inset-left, 0);
     }
 
@@ -1236,7 +1236,7 @@ html:not(.dark) .chat-scroll {
       --oc-safe-area-top: env(safe-area-inset-top, 0);
       --oc-safe-area-right: env(safe-area-inset-right, 0);
       --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
-      --oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
+      --oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
       --oc-safe-area-left: env(safe-area-inset-left, 0);
     }