From 12954ec82ca442f23a9abe3dcdfe5e8a87a43427 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Tue, 17 Dec 2024 02:38:11 +0000
Subject: [PATCH] fix(mobile): editor error boundary is not fully visible
 (#9172)

---
 .../affine-error-boundary/affine-error-fallback.tsx   |  4 +++-
 .../components/affine/affine-error-boundary/index.tsx | 11 +++++++++--
 .../pages/workspace/detail/mobile-detail-page.css.ts  |  4 ++++
 .../pages/workspace/detail/mobile-detail-page.tsx     |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx
index 3a5432139..53616a53a 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx
+++ b/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} />
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx
index 78979e56c..3a97094c0 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx
+++ b/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) => {
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts
index 44a3b147a..78d42de68 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts
+++ b/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',
 });
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
index 4ec730b57..fbe5d113f 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
+++ b/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>