feat(core): add sign in to not found page (#6496)

close AFF-211

packages/frontend/component/src/components/auth-components/auth-page-container.tsx

@@ -1,26 +1,14 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
 
 import { Empty } from '../../ui/empty';
 import { AffineOtherPageLayout } from '../affine-other-page-layout';
-import { authPageContainer } from './share.css';
+import { authPageContainer, hideInSmallScreen } from './share.css';
 
 export const AuthPageContainer: FC<
   PropsWithChildren<{ title?: ReactNode; subtitle?: ReactNode }>
 > = ({ children, title, subtitle }) => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-
-  useEffect(() => {
-    const checkScreenSize = () => {
-      setIsSmallScreen(window.innerWidth <= 1024);
-    };
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-    return () => window.removeEventListener('resize', checkScreenSize);
-  }, []);
-
   return (
-    <AffineOtherPageLayout isSmallScreen={isSmallScreen}>
+    <AffineOtherPageLayout>
       <div className={authPageContainer}>
         <div className="wrapper">
           <div className="content">
@@ -28,7 +16,9 @@ export const AuthPageContainer: FC<
             <p className="subtitle">{subtitle}</p>
             {children}
           </div>
-          {isSmallScreen ? null : <Empty />}
+          <div className={hideInSmallScreen}>
+            <Empty />
+          </div>
         </div>
       </div>
     </AffineOtherPageLayout>

packages/frontend/component/src/components/auth-components/share.css.ts

@@ -179,8 +179,12 @@ globalStyle(`${authPageContainer} a`, {
   color: cssVar('linkColor'),
 });
 export const signInPageContainer = style({
-  width: '400px',
-  margin: '205px auto 0',
+  height: '100vh',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
 });
 export const input = style({
   width: '330px',
@@ -190,3 +194,11 @@ export const input = style({
     },
   },
 });
+
+export const hideInSmallScreen = style({
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      display: 'none',
+    },
+  },
+});