feat: responsive ui above 640px (#1741)

apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx

@@ -18,7 +18,7 @@ export const PageListEmpty = (props: { listType?: string }) => {
   };
 
   return (
-    <div style={{ height: 'calc(100% - 60px)' }}>
+    <div style={{ height: 'calc(100% - 48px)' }}>
       <Empty description={getEmptyDescription()} />
     </div>
   );

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -16,11 +16,7 @@ import {
   PageIcon,
 } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
-import {
-  useMediaQuery,
-  useTheme as useMuiTheme,
-  useTheme,
-} from '@mui/material';
+import { useMediaQuery, useTheme } from '@mui/material';
 import { useAtomValue } from 'jotai';
 import type React from 'react';
 import { useCallback, useMemo } from 'react';
@@ -106,7 +102,7 @@ export const PageList: React.FC<PageListProps> = ({
   const pageList = usePageMeta(blockSuiteWorkspace);
   const helper = usePageMetaHelper(blockSuiteWorkspace);
   const { t } = useTranslation();
-  const theme = useMuiTheme();
+  const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.up('sm'));
   const isTrash = listType === 'trash';
   const record = useAtomValue(workspacePreferredModeAtom);

apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts

@@ -3,7 +3,7 @@ import { TableRow } from '@affine/component';
 
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
-    height: 'calc(100vh - 60px)',
+    height: 'calc(100vh - 48px)',
     padding: '78px 72px',
     overflowY: 'auto',
     [theme.breakpoints.down('sm')]: {