From ea405eafdc6267588baffe907dc901624b9f7948 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Wed, 26 Aug 2026 20:24:27 +0300
Subject: [PATCH] fix(mobile): let the keyboard shrink the page on Android
 browsers

The pre-dvh -webkit-fill-available viewport fix freezes Android Chrome's
root at the pre-keyboard height; when interactive-widget=resizes-content
shrinks the viewport, the document stays taller than the screen and the
clipped composer hides behind the keyboard with no way to scroll to it.
dvh-capable browsers now take a dynamic 100dvh instead, and the legacy
fallback keeps serving browsers without dvh.
---
 packages/ui/src/styles/mobile.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index 91dbafd1..d32e5dcd 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -142,6 +142,23 @@
     min-height: 0;
   }
 
+  /* -webkit-fill-available above is a pre-dvh iOS Safari fix. On Android
+     Chrome it freezes the root at the pre-keyboard height: when
+     interactive-widget=resizes-content shrinks the viewport, the document
+     stays taller than the screen and (with overflow hidden) the composer's
+     bottom is clipped behind the keyboard with no way to scroll to it.
+     Every dvh-capable browser gets the dynamic height instead; the legacy
+     fallback above keeps serving browsers without dvh. */
+  @supports (height: 100dvh) {
+    :root.mobile-pointer:not(.desktop-runtime) {
+      height: 100dvh;
+    }
+
+    :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
+      height: 100dvh;
+    }
+  }
+
   /* Fix main content area */
   :root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
     min-height: 0;
@@ -216,6 +233,16 @@
       min-height: -webkit-fill-available;
     }
 
+    /* Same Android-keyboard clipping fix as above: dvh-capable browsers
+       must not keep a frozen -webkit-fill-available minimum. */
+    @supports (min-height: 100dvh) {
+      :root.device-mobile:not(.desktop-runtime) .flex.flex-col.h-screen,
+      :root.device-tablet:not(.desktop-runtime) .flex.flex-col.h-screen,
+      :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
+        min-height: 100dvh;
+      }
+    }
+
     /* Prevent content overlap in iOS */
     :root.device-mobile:not(.desktop-runtime) .flex-1.overflow-hidden,
     :root.device-tablet:not(.desktop-runtime) .flex-1.overflow-hidden,