fix(mobile): editor error boundary is not fully visible (#9172)

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx

@@ -1,5 +1,6 @@
 import { useI18n } from '@affine/i18n';
 import { getCurrentStore } from '@toeverything/infra';
+import clsx from 'clsx';
 import { Provider } from 'jotai/react';
 import type { FC } from 'react';
 import { useCallback, useMemo } from 'react';
@@ -32,6 +33,7 @@ function getErrorFallbackComponent(error: any): FC<FallbackProps> {
 
 export interface AffineErrorFallbackProps extends FallbackProps {
   height?: number | string;
+  className?: string;
 }
 
 export const AffineErrorFallback: FC<AffineErrorFallbackProps> = props => {
@@ -39,7 +41,7 @@ export const AffineErrorFallback: FC<AffineErrorFallbackProps> = props => {
   const Component = useMemo(() => getErrorFallbackComponent(error), [error]);
 
   return (
-    <div className={styles.viewport} style={{ height }}>
+    <div className={clsx(styles.viewport, props.className)} style={{ height }}>
       <Component error={error} resetError={resetError} />
       <Provider key="JotaiProvider" store={getCurrentStore()}>
         <DumpInfo error={error} />

packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx

@@ -8,6 +8,7 @@ export { type FallbackProps } from './error-basic/fallback-creator';
 
 export interface AffineErrorBoundaryProps extends PropsWithChildren {
   height?: number | string;
+  className?: string;
 }
 
 /**
@@ -16,9 +17,15 @@ export interface AffineErrorBoundaryProps extends PropsWithChildren {
 export const AffineErrorBoundary: FC<AffineErrorBoundaryProps> = props => {
   const fallbackRender: FallbackRender = useCallback(
     fallbackProps => {
-      return <AffineErrorFallback {...fallbackProps} height={props.height} />;
+      return (
+        <AffineErrorFallback
+          {...fallbackProps}
+          height={props.height}
+          className={props.className}
+        />
+      );
     },
-    [props.height]
+    [props.height, props.className]
   );
 
   const onError = useCallback((error: unknown, componentStack?: string) => {

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts

@@ -80,6 +80,10 @@ export const affineDocViewport = style({
   },
 });
 
+export const errorBoundary = style({
+  flex: 1,
+});
+
 export const scrollbar = style({
   marginRight: '4px',
 });

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -205,7 +205,7 @@ const DetailPageImpl = () => {
           )}
         >
           {/* Add a key to force rerender when page changed, to avoid error boundary persisting. */}
-          <AffineErrorBoundary key={doc.id}>
+          <AffineErrorBoundary key={doc.id} className={styles.errorBoundary}>
             <PageDetailEditor onLoad={onLoad} />
           </AffineErrorBoundary>
         </div>