feat(core): add responsive styles to registration page (#5044)

The responsive style of the login and registration page has been adjusted, with special treatment given to the input.
work for #4843

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

@@ -1,32 +1,41 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 
 import { Empty } from '../../ui/empty';
-import { Wrapper } from '../../ui/layout';
-import { Logo } from './logo';
+import { AffineOtherPageLayout } from '../affine-other-page-layout';
 import { authPageContainer } 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 (
-    <div className={authPageContainer}>
-      <Wrapper
-        style={{
-          position: 'absolute',
-          top: 25,
-          left: 20,
-        }}
-      >
-        <Logo />
-      </Wrapper>
-      <div className="wrapper">
-        <div className="content">
-          <p className="title">{title}</p>
-          <p className="subtitle">{subtitle}</p>
-          {children}
+    <AffineOtherPageLayout isSmallScreen={isSmallScreen}>
+      <div className={authPageContainer}>
+        <div className="wrapper">
+          <div className="content">
+            <p className="title">{title}</p>
+            <p className="subtitle">{subtitle}</p>
+            {children}
+          </div>
+          {isSmallScreen ? null : <Empty />}
         </div>
-        <Empty />
       </div>
-    </div>
+    </AffineOtherPageLayout>
   );
 };