fix(ios): adjust bootom padding of body when keyboard toolbar existed (#11410)

Close [BS-2919](https://linear.app/affine-design/issue/BS-2919/【移动端】ios-页面底部点几，页面定位有问题，光标和浮层重叠，并且看不到新添加的-block)
Close [BS-2918](https://linear.app/affine-design/issue/BS-2918/【移动端】ios-添加标题无法展示对应-block，滑动页面也无效，光标位置也不对)

## Changes
- Fixed body padding calculation when keyboard toolbar is present
- Removed redundant position controller logic and simplified the implementation

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-tool-panel.ts

@@ -95,6 +95,6 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
   @property({ attribute: false })
   accessor context!: KeyboardToolbarContext;
 
-  @property({ type: Number })
+  @property({ attribute: false })
   accessor height = 0;
 }

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts

@@ -315,7 +315,7 @@ export class AffineKeyboardToolbar extends SignalWatcher(
       <affine-keyboard-tool-panel
         .config=${this._currentPanelConfig}
         .context=${this._context}
-        height=${this.panelHeight$.value}
+        .height=${this.panelHeight$.value}
       ></affine-keyboard-tool-panel>
     `;
   }

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/position-controller.ts

@@ -4,8 +4,6 @@ import type { BlockStdScope, ShadowlessElement } from '@blocksuite/std';
 import { effect, type Signal } from '@preact/signals-core';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
-import { TOOLBAR_HEIGHT } from './styles';
-
 /**
  * This controller is used to control the keyboard toolbar position
  */
@@ -25,7 +23,7 @@ export class PositionController implements ReactiveController {
   }
 
   hostConnected() {
-    const { keyboard, panelOpened } = this.host;
+    const { keyboard } = this.host;
 
     this._disposables.add(
       effect(() => {
@@ -36,20 +34,6 @@ export class PositionController implements ReactiveController {
     );
 
     this.host.style.bottom = '0px';
-    this._disposables.add(
-      effect(() => {
-        if (keyboard.visible$.value) {
-          document.body.style.paddingBottom = `${keyboard.height$.value + TOOLBAR_HEIGHT}px`;
-        } else if (panelOpened) {
-          document.body.style.paddingBottom = `${this.host.panelHeight$.peek() + TOOLBAR_HEIGHT}px`;
-        } else {
-          document.body.style.paddingBottom = '';
-        }
-      })
-    );
-    this._disposables.add(() => {
-      document.body.style.paddingBottom = '';
-    });
   }
 
   hostDisconnected() {

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/styles.ts

@@ -2,8 +2,6 @@ import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
-export const TOOLBAR_HEIGHT = 46;
-
 export const keyboardToolbarStyles = css`
   affine-keyboard-toolbar {
     position: fixed;
@@ -13,7 +11,7 @@ export const keyboardToolbarStyles = css`
 
   .keyboard-toolbar {
     width: 100%;
-    height: ${TOOLBAR_HEIGHT}px;
+    height: 46px;
     display: inline-flex;
     align-items: center;
     padding: 0px 8px;

packages/frontend/core/src/mobile/components/app-tabs/styles.css.ts

@@ -1,7 +1,7 @@
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, style } from '@vanilla-extract/css';
 
-import { globalVars } from '../../styles/mobile.css';
+import { globalVars } from '../../styles/variables.css';
 
 export const appTabsBackground = createVar('appTabsBackground');
 

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

@@ -1,10 +1,12 @@
 import { LiveData, Service } from '@toeverything/infra';
+import { setElementVars } from '@vanilla-extract/dynamic';
+import { distinctUntilChanged, scan } from 'rxjs';
 
+import { globalVars } from '../../../styles/variables.css';
 import type { VirtualKeyboardProvider } from '../providers/virtual-keyboard';
 
 export class VirtualKeyboardService extends Service {
   readonly visible$ = new LiveData(false);
-
   readonly height$ = new LiveData(0);
 
   constructor(
@@ -21,5 +23,20 @@ export class VirtualKeyboardService extends Service {
         this.height$.next(info.height);
       })
     );
+
+    // record the static keyboard height to css var
+    const subscription = this.height$
+      .pipe(
+        scan((lastHeight, currentHeight) =>
+          this.visible$.value ? currentHeight : lastHeight
+        ),
+        distinctUntilChanged()
+      )
+      .subscribe(height => {
+        setElementVars(document.body, {
+          [globalVars.appKeyboardHeight]: `${height}px`,
+        });
+      });
+    this.disposables.push(() => subscription.unsubscribe());
   }
 }

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

@@ -1,10 +1,7 @@
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { createVar, globalStyle } from '@vanilla-extract/css';
+import { globalStyle } from '@vanilla-extract/css';
 
-export const globalVars = {
+import { globalVars } from './variables.css';
-  appTabHeight: createVar('appTabHeight'),
-  appTabSafeArea: createVar('appTabSafeArea'),
-};
 
 globalStyle(':root', {
   vars: {
@@ -20,15 +17,19 @@ globalStyle('body', {
   minHeight: '100dvh',
   overflowY: 'unset',
 });
-globalStyle('body:has(> #app-tabs)', {
+globalStyle('body:has(>#app-tabs):not(:has(affine-keyboard-toolbar))', {
   paddingBottom: globalVars.appTabSafeArea,
 });
-globalStyle('body:has(#app-tabs) affine-keyboard-tool-panel', {
+globalStyle('body:has(affine-keyboard-toolbar)', {
-  paddingBottom: `calc(${globalVars.appTabHeight} + env(safe-area-inset-bottom) + 8px)`,
+  paddingBottom: `calc(${globalVars.appKeyboardHeight} + 46px)`,
 });
-globalStyle('body:has(#app-tabs) edgeless-toolbar-widget', {
+globalStyle('body:has(>#app-tabs) affine-keyboard-tool-panel', {
+  paddingBottom: `calc(${globalVars.appTabSafeArea} + 8px)`,
+});
+globalStyle('body:has(>#app-tabs) edgeless-toolbar-widget', {
   bottom: globalVars.appTabSafeArea,
 });
+
 globalStyle('html', {
   height: '100dvh',
   overflowY: 'auto',

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

@@ -0,0 +1,7 @@
+import { createVar } from '@vanilla-extract/css';
+
+export const globalVars = {
+  appKeyboardHeight: createVar('appKeyboardHeight'),
+  appTabHeight: createVar('appTabHeight'),
+  appTabSafeArea: createVar('appTabSafeArea'),
+};