feat: add responvise page view (#2453)

packages/component/src/components/page-list/styles.ts

@@ -4,14 +4,26 @@ import { TableRow } from '@affine/component';
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
     height: 'calc(100vh - 52px)',
-    padding: '78px 72px',
+    padding: '52px 32px',
     maxWidth: '100%',
     overflowY: 'auto',
-    [theme.breakpoints.down('md')]: {
-      padding: '12px 24px',
+    [theme.breakpoints.down('sm')]: {
+      padding: '52px 0px',
+      'tr > td:first-of-type': {
+        borderTopLeftRadius: '0px',
+        borderBottomLeftRadius: '0px',
+      },
+      'tr > td:last-of-type': {
+        borderTopRightRadius: '0px',
+        borderBottomRightRadius: '0px',
+      },
     },
   };
 });
+
+/**
+ * @deprecated
+ */
 export const StyledTitleWrapper = styled('div')(() => {
   return {
     ...displayFlex('flex-start', 'center'),
@@ -28,8 +40,6 @@ export const StyledTitleWrapper = styled('div')(() => {
 });
 export const StyledTitleLink = styled('div')(() => {
   return {
-    maxWidth: '80%',
-    marginRight: '18px',
     ...displayFlex('flex-start', 'center'),
     color: 'var(--affine-text-primary-color)',
     '>svg': {