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')]: {

apps/web/src/components/blocksuite/header/styles.ts

@@ -6,16 +6,22 @@ import {
 } from '@affine/component';
 
 export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
-  ({ hasWarning }) => {
+  ({ theme, hasWarning }) => {
     return {
       height: hasWarning ? '96px' : '48px',
+      flexShrink: 0,
+      position: 'sticky',
+      top: 0,
+      background: theme.colors.pageBackground,
+      zIndex: 1,
     };
   }
 );
 export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
   ({ theme }) => {
     return {
-      height: '60px',
+      flexShrink: 0,
+      height: '48px',
       width: '100%',
       padding: '0 20px',
       ...displayFlex('space-between', 'center'),
@@ -28,7 +34,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
 );
 
 export const StyledTitleContainer = styled('div')(({ theme }) => ({
-  width: '720px',
+  width: '100%',
   height: '100%',
 
   margin: 'auto',
@@ -37,15 +43,24 @@ export const StyledTitleContainer = styled('div')(({ theme }) => ({
   fontSize: theme.font.base,
 }));
 
-export const StyledTitle = styled('div')(() => {
+export const StyledTitle = styled('div')(({ theme }) => {
   return {
     maxWidth: '620px',
+    [theme.breakpoints.down('lg')]: {
+      maxWidth: '480px',
+    },
+    [theme.breakpoints.down('md')]: {
+      maxWidth: '240px',
+    },
+    [theme.breakpoints.down('sm')]: {
+      maxWidth: '180px',
+    },
+    transition: 'max-width .15s',
     ...textEllipsis(1),
   };
 });
 
 export const StyledTitleWrapper = styled('div')({
-  maxWidth: '720px',
   height: '100%',
   position: 'relative',
   ...displayFlex('center', 'center'),
@@ -132,7 +147,7 @@ export const StyledQuickSearchTipButton = styled('div')(({ theme }) => {
     ...displayFlex('center', 'center'),
     marginTop: '12px',
     color: '#FFFFFF',
-    width: '60px',
+    width: '48px',
     height: ' 26px',
     fontSize: theme.font.sm,
     lineHeight: '22px',