fix(mobile): mobile keyboard padding (#15365)

#### PR Dependency Tree


* **PR #15365** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
- Improved mobile keyboard and toolbar layout handling when the keyboard
overlays or resizes app content.
- Prevented incorrect extra spacing when Android applies keyboard insets
directly.
- Updated toolbar sizing and visibility states for smoother transitions.

- **Style**
- Adjusted mobile bottom spacing to account for keyboard height, safe
areas, and toolbar height.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/apps/android/src/app.tsx

@@ -149,6 +149,9 @@ framework.impl(VirtualKeyboardProvider, {
             // even though the `keyboardWillShow` event is still triggered.
             visible: info.keyboardHeight !== 0,
             height: info.keyboardHeight - navBarHeight,
+            // SystemBars applies the IME inset to the WebView parent, so the
+            // keyboard no longer overlaps the web content on Android.
+            overlaysContent: false,
           });
         })().catch(console.error);
       }),

packages/frontend/core/src/blocksuite/view-extensions/mobile/keyboard-toolbar-extension.ts

@@ -45,15 +45,19 @@ export function KeyboardToolbarExtension(
 
     override mounted() {
       this._disposables.add(
-        affineVirtualKeyboardProvider.onChange(({ visible, height }) => {
-          batch(() => {
-            if (visible && this.staticHeight$.peek() !== height) {
-              this.staticHeight$.value = height;
-            }
-            this.visible$.value = visible;
-            this.height$.value = height;
-          });
-        })
+        affineVirtualKeyboardProvider.onChange(
+          ({ visible, height, overlaysContent }) => {
+            const layoutHeight = overlaysContent === false ? 0 : height;
+
+            batch(() => {
+              if (visible && this.staticHeight$.peek() !== height) {
+                this.staticHeight$.value = height;
+              }
+              this.visible$.value = visible;
+              this.height$.value = layoutHeight;
+            });
+          }
+        )
       );
     }
 

packages/frontend/core/src/mobile/modules/virtual-keyboard/providers/virtual-keyboard.ts

@@ -3,6 +3,7 @@ import { createIdentifier } from '@toeverything/infra';
 interface VirtualKeyboardInfo {
   visible: boolean;
   height: number;
+  overlaysContent?: boolean;
 }
 
 type VirtualKeyboardAction = {

packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts

@@ -20,8 +20,10 @@ export class VirtualKeyboardService extends Service {
   private _observe() {
     this.disposables.push(
       this.virtualKeyboardProvider.onChange(info => {
+        const layoutHeight = info.overlaysContent === false ? 0 : info.height;
+
         this.visible$.next(info.visible);
-        this.height$.next(info.height);
+        this.height$.next(layoutHeight);
 
         setElementVars(document.body, {
           [globalVars.appKeyboardHeight]: `${this.height$.value}px`,

packages/frontend/core/src/mobile/styles/mobile.css.ts

@@ -22,6 +22,12 @@ globalStyle('body:has(>#app-tabs):not(:has(affine-keyboard-toolbar))', {
   paddingBottom: globalVars.appTabSafeArea,
 });
 globalStyle('body:has(affine-keyboard-toolbar)', {
+  paddingBottom: `calc(${globalVars.appTabSafeArea} + 46px)`,
+});
+globalStyle('body:has(affine-keyboard-toolbar[data-keyboard-visible])', {
+  paddingBottom: `calc(${globalVars.appKeyboardHeight} + 46px)`,
+});
+globalStyle('body:has(affine-keyboard-toolbar[data-panel-open])', {
   paddingBottom: `calc(${globalVars.appKeyboardStaticHeight} + 46px)`,
 });
 globalStyle('body:has(>#app-tabs) edgeless-toolbar-widget', {