From 6917d2100f4c014721bdf59568d94d06d1e0314d Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Tue, 28 Mar 2023 14:42:30 -0500
Subject: [PATCH] fix(web): css in mobile (#1731)

---
 .../block-suite-page-list/page-list/styles.ts        |  5 ++++-
 apps/web/src/styles/globals.css                      | 12 ++++++++++++
 packages/component/src/ui/table/styles.ts            |  3 +++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
index a0a1fe3454..61742c0b12 100644
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
@@ -1,11 +1,14 @@
 import { displayFlex, styled } from '@affine/component';
 import { TableRow } from '@affine/component';
 
-export const StyledTableContainer = styled('div')(() => {
+export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
     height: 'calc(100vh - 60px)',
     padding: '78px 72px',
     overflowY: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      padding: '12px 24px',
+    },
   };
 });
 export const StyledTitleWrapper = styled('div')(({ theme }) => {
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 17f66e3a13..3036683ffa 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -208,3 +208,15 @@ affine-block-hub {
 .block-hub-menu-container {
   position: unset !important;
 }
+
+@media (max-width: 768px) {
+  .affine-default-page-block-title-container {
+    margin-top: 24px;
+  }
+
+  .editor-wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 0 0.75rem;
+  }
+}
diff --git a/packages/component/src/ui/table/styles.ts b/packages/component/src/ui/table/styles.ts
index 1b0858b37a..e7c8896a76 100644
--- a/packages/component/src/ui/table/styles.ts
+++ b/packages/component/src/ui/table/styles.ts
@@ -11,6 +11,9 @@ export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
       minWidth: '600px',
       borderCollapse: 'separate',
       borderSpacing: '0',
+      [theme.breakpoints.down('sm')]: {
+        minWidth: 'unset',
+      },
     };
   }
 );