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>

packages/ui/src/styles/design-system.css

@@ -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;

packages/ui/src/styles/mobile.css

@@ -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;