fix(ui): stabilize mobile keyboard viewport handling (#1026)

* fix(ui): stabilize mobile keyboard viewport handling * fix(ui): tighten mobile keyboard viewport handling * Avoid redundant keyboard open store writes --------- Co-authored-by: vhqtvn <8930337+vhqtvn@users.noreply.github.com> Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-04-25 20:58:40 +03:00
parent 33b1b67514
commit 87db2ea210
8 changed files with 313 additions and 10 deletions
@@ -786,6 +786,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
    const agents = getVisibleAgents();
    const primaryAgents = React.useMemo(() => agents.filter((agent) => agent.mode === 'primary'), [agents]);
    const isMobile = useUIStore((state) => state.isMobile);
+    const isKeyboardOpen = useUIStore((state) => state.isKeyboardOpen);
    const inputBarOffset = useUIStore((state) => state.inputBarOffset);
    const persistChatDraft = useUIStore((state) => state.persistChatDraft);
    const inputSpellcheckEnabled = useUIStore((state) => state.inputSpellcheckEnabled);
@@ -3291,10 +3292,10 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
            className={cn(
                "relative pt-0 pb-4",
                isDesktopExpanded && 'flex h-full min-h-0 flex-col pt-4',
-                isMobile && 'bottom-safe-area'
+                isMobile && (isKeyboardOpen ? 'ios-keyboard-safe-area' : 'bottom-safe-area')
            )}
-
-            style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined}
+            data-keyboard-avoid="none"
+            style={isMobile && inputBarOffset > 0 && !isKeyboardOpen ? { marginBottom: `${inputBarOffset}px` } : undefined}
        >
            <div className={cn('chat-column relative overflow-visible', isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
                <AttachedFilesList />
@@ -351,6 +351,255 @@ export const MainLayout: React.FC = () => {
        };
    }, []);

+    React.useEffect(() => {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
+        }
+
+        const root = document.documentElement;
+
+        let stickyKeyboardInset = 0;
+        let ignoreOpenUntilZero = false;
+        let previousHeight = 0;
+        let maxObservedLayoutHeight = 0;
+        let previousOrientation = '';
+        let keyboardAvoidTarget: HTMLElement | null = null;
+
+        const setKeyboardOpen = useUIStore.getState().setKeyboardOpen;
+        const userAgent = typeof navigator === 'undefined' ? '' : navigator.userAgent;
+        const isAndroid = /Android/i.test(userAgent);
+        const isIOS = /iPad|iPhone|iPod/.test(userAgent);
+
+        const clearKeyboardAvoidTarget = () => {
+            if (!keyboardAvoidTarget) {
+                return;
+            }
+            keyboardAvoidTarget.style.setProperty('--oc-keyboard-avoid-offset', '0px');
+            keyboardAvoidTarget.removeAttribute('data-keyboard-avoid-active');
+            keyboardAvoidTarget = null;
+        };
+
+        const resolveKeyboardAvoidTarget = (active: HTMLElement | null) => {
+            if (!active) {
+                return null;
+            }
+            const explicitTargetId = active.getAttribute('data-keyboard-avoid-target-id');
+            if (explicitTargetId) {
+                const explicitTarget = document.getElementById(explicitTargetId);
+                if (explicitTarget instanceof HTMLElement) {
+                    return explicitTarget;
+                }
+            }
+            const markedTarget = active.closest('[data-keyboard-avoid]') as HTMLElement | null;
+            if (markedTarget) {
+                // data-keyboard-avoid="none" opts out of translateY avoidance entirely.
+                // Used by components with their own scroll (e.g. CodeMirror).
+                if (markedTarget.getAttribute('data-keyboard-avoid') === 'none') {
+                    return null;
+                }
+                return markedTarget;
+            }
+            if (active.classList.contains('overlay-scrollbar-container')) {
+                const parent = active.parentElement;
+                if (parent instanceof HTMLElement) {
+                    return parent;
+                }
+            }
+            return active;
+        };
+
+        const forceKeyboardClosed = () => {
+            stickyKeyboardInset = 0;
+            ignoreOpenUntilZero = true;
+            root.style.setProperty('--oc-keyboard-inset', '0px');
+            setKeyboardOpen(false);
+        };
+
+        let rafId = 0;
+
+        const updateVisualViewport = () => {
+            const viewport = window.visualViewport;
+
+            const height = viewport ? Math.round(viewport.height) : window.innerHeight;
+            const offsetTop = viewport ? Math.max(0, Math.round(viewport.offsetTop)) : 0;
+            const orientation = window.innerWidth >= window.innerHeight ? 'landscape' : 'portrait';
+
+            root.style.setProperty('--oc-visual-viewport-offset-top', `${offsetTop}px`);
+            root.style.setProperty('--oc-visual-viewport-height', `${height}px`);
+
+            const active = document.activeElement as HTMLElement | null;
+            const tagName = active?.tagName;
+            const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
+            const isTextTarget = isInput || Boolean(active?.isContentEditable);
+
+            const layoutHeight = Math.round(root.clientHeight || window.innerHeight);
+            if (previousOrientation !== orientation) {
+                previousOrientation = orientation;
+                maxObservedLayoutHeight = layoutHeight;
+            } else if (layoutHeight > maxObservedLayoutHeight || maxObservedLayoutHeight === 0) {
+                maxObservedLayoutHeight = layoutHeight;
+            }
+            const viewportSum = height + offsetTop;
+            const rawInset = Math.max(0, layoutHeight - viewportSum);
+            const rawAndroidResizeInset = isAndroid
+                ? Math.max(0, maxObservedLayoutHeight - layoutHeight)
+                : 0;
+
+            const openThreshold = isTextTarget ? 120 : 180;
+            const measuredInset = rawInset >= openThreshold ? rawInset : 0;
+            const androidResizeInset = isTextTarget && rawAndroidResizeInset >= openThreshold
+                ? rawAndroidResizeInset
+                : 0;
+            const effectiveMeasuredInset = Math.max(measuredInset, androidResizeInset);
+
+            if (ignoreOpenUntilZero) {
+                if (effectiveMeasuredInset === 0) {
+                    ignoreOpenUntilZero = false;
+                }
+                stickyKeyboardInset = 0;
+            } else if (stickyKeyboardInset === 0) {
+                if (effectiveMeasuredInset > 0 && isTextTarget) {
+                    stickyKeyboardInset = effectiveMeasuredInset;
+                    setKeyboardOpen(true);
+                }
+            } else {
+                const closingByHeight = !isTextTarget && height > previousHeight + 6;
+
+                if (effectiveMeasuredInset === 0) {
+                    stickyKeyboardInset = 0;
+                    setKeyboardOpen(false);
+                } else if (closingByHeight) {
+                    forceKeyboardClosed();
+                } else if (effectiveMeasuredInset > 0 && isTextTarget) {
+                    stickyKeyboardInset = effectiveMeasuredInset;
+                    setKeyboardOpen(true);
+                } else if (effectiveMeasuredInset > stickyKeyboardInset) {
+                    stickyKeyboardInset = effectiveMeasuredInset;
+                    setKeyboardOpen(true);
+                }
+            }
+
+            root.style.setProperty('--oc-keyboard-inset', `${stickyKeyboardInset}px`);
+            previousHeight = height;
+
+            const keyboardHomeIndicator = isIOS && stickyKeyboardInset > 0 ? 34 : 0;
+            root.style.setProperty('--oc-keyboard-home-indicator', `${keyboardHomeIndicator}px`);
+
+            const avoidTarget = isTextTarget ? resolveKeyboardAvoidTarget(active) : null;
+
+            if (!isMobile || !avoidTarget || !active) {
+                clearKeyboardAvoidTarget();
+            } else {
+                if (avoidTarget !== keyboardAvoidTarget) {
+                    clearKeyboardAvoidTarget();
+                    keyboardAvoidTarget = avoidTarget;
+                }
+                const viewportBottom = offsetTop + height;
+                const rect = active.getBoundingClientRect();
+                const overlap = rect.bottom - viewportBottom;
+                const clearance = 8;
+                const keyboardInset = Math.max(stickyKeyboardInset, effectiveMeasuredInset);
+                const avoidOffset = overlap > clearance && keyboardInset > 0
+                    ? Math.min(overlap, keyboardInset)
+                    : 0;
+                const target = keyboardAvoidTarget;
+                if (target) {
+                    target.style.setProperty('--oc-keyboard-avoid-offset', `${avoidOffset}px`);
+                    target.setAttribute('data-keyboard-avoid-active', 'true');
+                }
+            }
+
+            if (isMobile && isTextTarget) {
+                const scroller = document.scrollingElement;
+                if (scroller && scroller.scrollTop !== 0) {
+                    scroller.scrollTop = 0;
+                }
+                if (window.scrollY !== 0) {
+                    window.scrollTo(0, 0);
+                }
+            }
+        };
+
+        const scheduleVisualViewportUpdate = () => {
+            if (rafId) return;
+            rafId = requestAnimationFrame(() => {
+                rafId = 0;
+                updateVisualViewport();
+            });
+        };
+
+        updateVisualViewport();
+
+        const viewport = window.visualViewport;
+        viewport?.addEventListener('resize', scheduleVisualViewportUpdate);
+        viewport?.addEventListener('scroll', scheduleVisualViewportUpdate);
+        window.addEventListener('resize', scheduleVisualViewportUpdate);
+        window.addEventListener('orientationchange', scheduleVisualViewportUpdate);
+        const isTextInputTarget = (element: HTMLElement | null) => {
+            if (!element) {
+                return false;
+            }
+            const tagName = element.tagName;
+            const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
+            return isInput || element.isContentEditable;
+        };
+
+        const handleFocusIn = (event: FocusEvent) => {
+            const target = event.target as HTMLElement | null;
+            if (isTextInputTarget(target)) {
+                ignoreOpenUntilZero = false;
+            }
+            scheduleVisualViewportUpdate();
+        };
+        document.addEventListener('focusin', handleFocusIn, true);
+
+        const handleFocusOut = (event: FocusEvent) => {
+            const target = event.target as HTMLElement | null;
+            if (!isTextInputTarget(target)) {
+                return;
+            }
+
+            const related = event.relatedTarget as HTMLElement | null;
+            if (isTextInputTarget(related)) {
+                return;
+            }
+
+            window.requestAnimationFrame(() => {
+                if (isTextInputTarget(document.activeElement as HTMLElement | null)) {
+                    return;
+                }
+
+                const currentViewport = window.visualViewport;
+                const height = currentViewport ? Math.round(currentViewport.height) : window.innerHeight;
+                const offsetTop = currentViewport ? Math.max(0, Math.round(currentViewport.offsetTop)) : 0;
+                const layoutHeight = Math.round(root.clientHeight || window.innerHeight);
+                const viewportSum = height + offsetTop;
+                const rawInset = Math.max(0, layoutHeight - viewportSum);
+
+                if (rawInset > 0) {
+                    updateVisualViewport();
+                    return;
+                }
+
+                forceKeyboardClosed();
+                updateVisualViewport();
+            });
+        };
+
+        document.addEventListener('focusout', handleFocusOut, true);
+
+        return () => {
+            if (rafId) cancelAnimationFrame(rafId);
+            viewport?.removeEventListener('resize', scheduleVisualViewportUpdate);
+            viewport?.removeEventListener('scroll', scheduleVisualViewportUpdate);
+            window.removeEventListener('resize', scheduleVisualViewportUpdate);
+            window.removeEventListener('orientationchange', scheduleVisualViewportUpdate);
+            document.removeEventListener('focusin', handleFocusIn, true);
+            document.removeEventListener('focusout', handleFocusOut, true);
+            clearKeyboardAvoidTarget();
+        };
+    }, [isMobile]);
+
    const secondaryView = React.useMemo(() => {
        switch (activeMainTab) {
            case 'plan':
@@ -382,7 +631,8 @@ export const MainLayout: React.FC = () => {
        <DiffWorkerProvider>
            <div
                className={cn(
-                    'main-content-safe-area h-[100dvh]',
+                    'main-content-safe-area',
+                    isMobile ? 'h-full' : 'h-[100dvh]',
                    isMobile ? 'flex flex-col' : 'flex',
                    'bg-background'
                )}
@@ -223,6 +223,10 @@ textarea[data-chat-input="true"]:focus-visible {
  -webkit-appearance: none;
 }

+[data-keyboard-avoid-active="true"] {
+  transform: translateY(calc(-1 * var(--oc-keyboard-avoid-offset, 0px)));
+}
+
 /* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
 [data-scroll-shadow="true"] {
  --scroll-shadow-size: var(--scroll-shadow-size, 48px);
@@ -32,6 +32,7 @@ const setRootDeviceAttributes = (
  isTauriShellRuntime: boolean,
  deviceType: DeviceType,
  hasTouchInput: boolean,
+  isAndroid: boolean,
 ) => {
  if (typeof window === 'undefined') {
    return;
@@ -41,7 +42,7 @@ const setRootDeviceAttributes = (
  const isMobile = deviceType === 'mobile';
  const isTablet = deviceType === 'tablet';

-  root.classList.remove('device-mobile', 'device-tablet', 'device-desktop');
+  root.classList.remove('device-mobile', 'device-tablet', 'device-desktop', 'device-android');
  root.classList.add(
    deviceType === 'mobile'
      ? 'device-mobile'
@@ -60,6 +61,9 @@ const setRootDeviceAttributes = (
    root.classList.remove('mobile-pointer');
  } else {
    root.classList.remove('desktop-runtime');
+    if (isAndroid) {
+      root.classList.add('device-android');
+    }
    root.style.setProperty('--is-mobile', isMobile ? '1' : '0');
    root.style.setProperty('--device-type', deviceType);
    root.style.setProperty('--font-scale', isMobile ? '0.9' : isTablet ? '0.95' : '1');
@@ -81,6 +85,7 @@ export function getDeviceInfo(): DeviceInfo {
  const prefersCoarsePointer = pointerQuery?.matches ?? false;
  const noHover = hoverQuery?.matches ?? false;
  const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
+  const isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);

  const isDesktopShellRuntime = isDesktopShell();

@@ -108,7 +113,7 @@ export function getDeviceInfo(): DeviceInfo {
    deviceType = 'desktop';
  }

-  setRootDeviceAttributes(isDesktopShellRuntime, deviceType, hasTouchInput);
+  setRootDeviceAttributes(isDesktopShellRuntime, deviceType, hasTouchInput, !isDesktopShellRuntime && isAndroid);

  let breakpoint: keyof typeof BREAKPOINTS = 'xs';
  for (const [key, value] of Object.entries(BREAKPOINTS)) {
@@ -220,8 +225,14 @@ export function useDeviceInfo(): DeviceInfo {
    const prefersCoarsePointer = pointerQuery?.matches ?? false;
    const noHover = hoverQuery?.matches ?? false;
    const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
+    const isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);
    const hasTouchInput = prefersCoarsePointer || noHover || maxTouchPoints > 0;
-    setRootDeviceAttributes(isDesktopShellRuntime, deviceInfo.deviceType, hasTouchInput);
+    setRootDeviceAttributes(
+      isDesktopShellRuntime,
+      deviceInfo.deviceType,
+      hasTouchInput,
+      !isDesktopShellRuntime && isAndroid,
+    );
  }, [deviceInfo.deviceType, deviceInfo.hasTouchInput]);

  return deviceInfo;
@@ -482,6 +482,7 @@ interface UIStore {
  pendingFileNavigation: PendingFileNavigation | null;
  pendingFileFocusPath: string | null;
  isMobile: boolean;
+  isKeyboardOpen: boolean;
  isQuickOpenOpen: boolean;
  isCommandPaletteOpen: boolean;
  isHelpDialogOpen: boolean;
@@ -636,6 +637,7 @@ interface UIStore {
  setPadding: (size: number) => void;
  setCornerRadius: (radius: number) => void;
  setInputBarOffset: (offset: number) => void;
+  setKeyboardOpen: (open: boolean) => void;
  applyTypography: () => void;
  applyPadding: () => void;
  updateProportionalSidebarWidths: () => void;
@@ -722,6 +724,7 @@ export const useUIStore = create<UIStore>()(
        pendingFileNavigation: null,
        pendingFileFocusPath: null,
        isMobile: false,
+        isKeyboardOpen: false,
        isQuickOpenOpen: false,
        isCommandPaletteOpen: false,
        isHelpDialogOpen: false,
@@ -1467,6 +1470,10 @@ export const useUIStore = create<UIStore>()(
          set({ inputBarOffset: offset });
        },

+        setKeyboardOpen: (open) => {
+          set((state) => state.isKeyboardOpen === open ? state : { isKeyboardOpen: open });
+        },
+
        toggleFavoriteModel: (providerID, modelID) => {
          set((state) => {
            const exists = state.favoriteModels.some(
@@ -7,6 +7,11 @@
    --oc-safe-area-bottom-visual: 0px;
    --oc-safe-area-left: 0px;
    --oc-header-height: 56px;
+    --oc-visual-viewport-offset-top: 0px;
+    --oc-visual-viewport-height: 100dvh;
+    --oc-keyboard-inset: 0px;
+    --oc-keyboard-avoid-offset: 0px;
+    --oc-keyboard-home-indicator: 0px;
    --oc-wco-left-inset: 0px;
    --oc-wco-right-inset: 0px;
    --oc-wco-titlebar-height: 0px;
@@ -158,13 +158,34 @@
  }

  /* Fix mobile viewport height */
-  :root.mobile-pointer:not(.desktop-runtime),
-  :root.mobile-pointer:not(.desktop-runtime) body {
+  :root.mobile-pointer:not(.desktop-runtime) {
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
  }

+  :root.device-mobile:not(.desktop-runtime) body,
+  :root.device-mobile:not(.desktop-runtime) #root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--oc-visual-viewport-height, 100dvh);
+    width: 100%;
+    overflow: hidden;
+    overscroll-behavior-y: none;
+  }
+
+  :root.device-android:not(.desktop-runtime) body,
+  :root.device-android:not(.desktop-runtime) #root {
+    position: relative;
+    top: auto;
+    left: auto;
+    right: auto;
+    height: 100%;
+    min-height: 0;
+  }
+
  /* Fix main layout container */
  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
    height: 100vh;
@@ -267,6 +288,10 @@
      padding-bottom: var(--oc-safe-area-bottom-visual);
    }

+    :root.device-mobile:not(.desktop-runtime) .ios-keyboard-safe-area {
+      padding-bottom: calc(var(--oc-keyboard-home-indicator, 34px) + var(--oc-safe-area-bottom-visual, 0px)) !important;
+    }
+
    /* Fix iOS viewport issues */
    :root.device-mobile:not(.desktop-runtime) .flex.flex-col.h-screen {
      min-height: 100vh;
@@ -2,7 +2,7 @@
 <html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />