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

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 = {
-  appTabHeight: createVar('appTabHeight'),
-  appTabSafeArea: createVar('appTabSafeArea'),
-};
+import { globalVars } from './variables.css';
 
 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', {
-  paddingBottom: `calc(${globalVars.appTabHeight} + env(safe-area-inset-bottom) + 8px)`,
+globalStyle('body:has(affine-keyboard-toolbar)', {
+  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'),
+};