feat: responsive ui above 640px (#1741)

2024-11-28 04:53:53 +03:00 · 2023-03-31 09:12:18 +08:00 · 2023-03-31 09:12:18 +08:00 · c55d61a641
commit c55d61a641
parent bdb1264f09
22 changed files with 443 additions and 190 deletions
--- a/apps/web/src/components/affine/workspace-setting-detail/style.ts
+++ b/apps/web/src/components/affine/workspace-setting-detail/style.ts
@ -5,7 +5,7 @@ export const StyledSettingContainer = styled('div')(() => {
    display: 'flex',
    flexDirection: 'column',
    padding: '48px 0 0 48px',
-    height: 'calc(100vh - 60px)',
+    height: 'calc(100vh - 48px)',
  };
 });

--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx
+++ b/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>
  );
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
+++ b/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);
--- 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
@ -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')]: {
--- a/apps/web/src/components/blocksuite/header/styles.ts
+++ b/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',
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/apps/web/src/components/page-detail-editor.tsx
@ -68,7 +68,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
      </BlockSuiteEditorHeader>
      <Editor
        style={{
-          height: 'calc(100% - 60px)',
+          height: 'calc(100% - 48px)',
        }}
        key={pageId}
        blockSuiteWorkspace={blockSuiteWorkspace}
--- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
@ -2,7 +2,6 @@ import { displayFlex, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
 export const StyledSelectorContainer = styled('div')(({ theme }) => {
  return {
-    marginTop: '4px',
    height: '58px',
    display: 'flex',
    alignItems: 'center',
@ -10,7 +9,6 @@ export const StyledSelectorContainer = styled('div')(({ theme }) => {
    marginBottom: '16px',
    borderRadius: '8px',
    color: theme.colors.textColor,
-    position: 'relative',
    ':hover': {
      cursor: 'pointer',
      background: theme.colors.hoverBackground,
--- a/apps/web/src/components/pure/workspace-slider-bar/index.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/index.tsx
@ -8,10 +8,15 @@ import {
  SettingsIcon,
 } from '@blocksuite/icons';
 import type { Page, PageMeta } from '@blocksuite/store';
+import { useMediaQuery, useTheme } from '@mui/material';
 import type React from 'react';
 import { useCallback } from 'react';

-import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
+import {
+  useSidebarResizing,
+  useSidebarStatus,
+  useSidebarWidth,
+} from '../../../hooks/affine/use-sidebar-status';
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import type { AllWorkspace } from '../../../shared';
 import { SidebarSwitch } from '../../affine/sidebar-switch';
@ -23,8 +28,12 @@ import {
  StyledLink,
  StyledNewPageButton,
  StyledSidebarSwitchWrapper,
-  StyledSlidebarWrapper,
  StyledSliderBar,
+  StyledSliderBarInnerWrapper,
+  StyledSliderBarWrapper,
+  StyledSliderModalBackground,
+  StyledSliderResizer,
+  StyledSliderResizerInner,
 } from './style';
 import { WorkspaceSelector } from './WorkspaceSelector';

@ -65,114 +74,171 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
 }) => {
  const currentWorkspaceId = currentWorkspace?.id || null;
  const { t } = useTranslation();
-  const [sidebarOpen] = useSidebarStatus();
+  const [sidebarOpen, setSidebarOpen] = useSidebarStatus();
  const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
  const onClickNewPage = useCallback(async () => {
    const page = await createPage();
    openPage(page.id);
  }, [createPage, openPage]);
+  const theme = useTheme();
+  const floatingSlider = useMediaQuery(theme.breakpoints.down('md'));
+  const [sliderWidth, setSliderWidth] = useSidebarWidth();
+  const [isResizing, setIsResizing] = useSidebarResizing();
+  const show = isPublicWorkspace ? false : sidebarOpen;
+  const actualWidth = show
+    ? floatingSlider
+      ? 'calc(10vw + 400px)'
+      : sliderWidth
+    : 0;
+  const onResizeStart = useCallback(() => {
+    let resized = false;
+    function onMouseMove(e: MouseEvent) {
+      const newWidth = Math.min(480, Math.max(e.clientX, 256));
+      setSliderWidth(newWidth);
+      setIsResizing(true);
+      resized = true;
+    }
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener(
+      'mouseup',
+      () => {
+        // if not resized, toggle sidebar
+        if (!resized) {
+          setSidebarOpen(o => !o);
+        }
+        setIsResizing(false);
+        document.removeEventListener('mousemove', onMouseMove);
+      },
+      { once: true }
+    );
+  }, [setIsResizing, setSidebarOpen, setSliderWidth]);
  return (
    <>
-      <StyledSliderBar show={isPublicWorkspace ? false : sidebarOpen}>
-        <StyledSidebarSwitchWrapper>
-          <SidebarSwitch
-            visible={sidebarOpen}
-            tooltipContent={t('Collapse sidebar')}
-            testid="sliderBar-arrowButton-collapse"
-          />
-        </StyledSidebarSwitchWrapper>
-
-        <StyledSlidebarWrapper data-testid="sliderBar">
-          <WorkspaceSelector
-            currentWorkspace={currentWorkspace}
-            onClick={onOpenWorkspaceListModal}
-          />
-          <ChangeLog />
-          <StyledListItem
-            data-testid="slider-bar-quick-search-button"
-            onClick={useCallback(() => {
-              onOpenQuickSearchModal();
-            }, [onOpenQuickSearchModal])}
-          >
-            <SearchIcon />
-            {t('Quick search')}
-          </StyledListItem>
-
-          <StyledListItem
-            active={
-              currentPath ===
-              (currentWorkspaceId && paths.setting(currentWorkspaceId))
-            }
-            data-testid="slider-bar-workspace-setting-button"
-            style={{
-              marginBottom: '16px',
-            }}
-          >
-            <StyledLink
-              href={{
-                pathname:
-                  currentWorkspaceId && paths.setting(currentWorkspaceId),
-              }}
-            >
-              <SettingsIcon />
-              {t('Workspace Settings')}
-            </StyledLink>
-          </StyledListItem>
-          <StyledListItem
-            active={
-              currentPath ===
-              (currentWorkspaceId && paths.all(currentWorkspaceId))
-            }
-          >
-            <StyledLink
-              href={{
-                pathname: currentWorkspaceId && paths.all(currentWorkspaceId),
-              }}
-            >
-              <FolderIcon />
-              <span data-testid="all-pages">{t('All pages')}</span>
-            </StyledLink>
-          </StyledListItem>
-          <Favorite
-            currentPath={currentPath}
-            paths={paths}
-            currentPageId={currentPageId}
-            openPage={openPage}
-            currentWorkspace={currentWorkspace}
-          />
-          {config.enableSubpage && !!currentWorkspace && (
-            <Pivots
-              currentWorkspace={currentWorkspace}
-              openPage={openPage}
-              allMetas={pageMeta}
-            />
-          )}
-          <StyledListItem
-            active={
-              currentPath ===
-              (currentWorkspaceId && paths.trash(currentWorkspaceId))
-            }
-            style={{
-              marginTop: '16px',
-            }}
-          >
-            <StyledLink
-              href={{
-                pathname: currentWorkspaceId && paths.trash(currentWorkspaceId),
-              }}
-            >
-              <DeleteTemporarilyIcon /> {t('Trash')}
-            </StyledLink>
-          </StyledListItem>
-        </StyledSlidebarWrapper>
-
-        <StyledNewPageButton
-          data-testid="new-page-button"
-          onClick={onClickNewPage}
+      <StyledSliderBarWrapper data-testid="sliderBar-root">
+        <StyledSliderBar
+          resizing={isResizing}
+          floating={floatingSlider}
+          style={{ width: actualWidth }}
+          show={show}
        >
-          <PlusIcon /> {t('New Page')}
-        </StyledNewPageButton>
-      </StyledSliderBar>
+          <StyledSidebarSwitchWrapper>
+            <SidebarSwitch
+              visible={sidebarOpen}
+              tooltipContent={t('Collapse sidebar')}
+              testid="sliderBar-arrowButton-collapse"
+            />
+          </StyledSidebarSwitchWrapper>
+
+          <StyledSliderBarInnerWrapper data-testid="sliderBar-inner">
+            <WorkspaceSelector
+              currentWorkspace={currentWorkspace}
+              onClick={onOpenWorkspaceListModal}
+            />
+            <ChangeLog />
+            <StyledListItem
+              data-testid="slider-bar-quick-search-button"
+              onClick={useCallback(() => {
+                onOpenQuickSearchModal();
+              }, [onOpenQuickSearchModal])}
+            >
+              <SearchIcon />
+              {t('Quick search')}
+            </StyledListItem>
+
+            <StyledListItem
+              active={
+                currentPath ===
+                (currentWorkspaceId && paths.setting(currentWorkspaceId))
+              }
+              data-testid="slider-bar-workspace-setting-button"
+              style={{
+                marginBottom: '16px',
+              }}
+            >
+              <StyledLink
+                href={{
+                  pathname:
+                    currentWorkspaceId && paths.setting(currentWorkspaceId),
+                }}
+              >
+                <SettingsIcon />
+                {t('Workspace Settings')}
+              </StyledLink>
+            </StyledListItem>
+
+            <StyledListItem
+              active={
+                currentPath ===
+                (currentWorkspaceId && paths.all(currentWorkspaceId))
+              }
+            >
+              <StyledLink
+                href={{
+                  pathname: currentWorkspaceId && paths.all(currentWorkspaceId),
+                }}
+              >
+                <FolderIcon />
+                <span data-testid="all-pages">{t('All pages')}</span>
+              </StyledLink>
+            </StyledListItem>
+
+            <Favorite
+              currentPath={currentPath}
+              paths={paths}
+              currentPageId={currentPageId}
+              openPage={openPage}
+              currentWorkspace={currentWorkspace}
+            />
+            {config.enableSubpage && !!currentWorkspace && (
+              <Pivots
+                currentWorkspace={currentWorkspace}
+                openPage={openPage}
+                allMetas={pageMeta}
+              />
+            )}
+
+            <StyledListItem
+              active={
+                currentPath ===
+                (currentWorkspaceId && paths.trash(currentWorkspaceId))
+              }
+              style={{
+                marginTop: '16px',
+              }}
+            >
+              <StyledLink
+                href={{
+                  pathname:
+                    currentWorkspaceId && paths.trash(currentWorkspaceId),
+                }}
+              >
+                <DeleteTemporarilyIcon /> {t('Trash')}
+              </StyledLink>
+            </StyledListItem>
+          </StyledSliderBarInnerWrapper>
+
+          <StyledNewPageButton
+            data-testid="new-page-button"
+            onClick={onClickNewPage}
+          >
+            <PlusIcon /> {t('New Page')}
+          </StyledNewPageButton>
+        </StyledSliderBar>
+        {!floatingSlider && sidebarOpen && (
+          <StyledSliderResizer
+            data-testid="sliderBar-resizer"
+            isResizing={isResizing}
+            onMouseDown={onResizeStart}
+          >
+            <StyledSliderResizerInner isResizing={isResizing} />
+          </StyledSliderResizer>
+        )}
+      </StyledSliderBarWrapper>
+      <StyledSliderModalBackground
+        data-testid="sliderBar-modalBackground"
+        active={floatingSlider && sidebarOpen}
+        onClick={() => setSidebarOpen(false)}
+      />
    </>
  );
 };
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@ -1,36 +1,45 @@
 import { displayFlex, styled } from '@affine/component';
 import Link from 'next/link';
-export const StyledSliderBar = styled('div')<{ show: boolean }>(
-  ({ theme, show }) => {
-    return {
-      width: show ? '256px' : '0',
-      whiteSpace: 'nowrap',
-      height: '100vh',
-      minHeight: '450px',
-      background: theme.colors.hubBackground,
-      boxShadow: theme.shadow.popover,
-      transition: 'width .15s, padding .15s',
-      position: 'relative',
-      zIndex: theme.zIndex.modal,
-      padding: show ? '0 4px' : '0',
-      flexShrink: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      [theme.breakpoints.down('sm')]: {
-        position: 'absolute',
-      },
-    };
-  }
-);
+
+export const StyledSliderBarWrapper = styled('div')(() => {
+  return {
+    height: '100%',
+    width: 'auto',
+    position: 'relative',
+  };
+});
+
+export const StyledSliderBar = styled('div')<{
+  resizing: boolean;
+  show: boolean;
+  floating: boolean;
+}>(({ theme, show, floating, resizing }) => {
+  return {
+    whiteSpace: 'nowrap',
+    height: '100%',
+    background: theme.colors.hubBackground,
+    zIndex: theme.zIndex.modal,
+    transition: !resizing ? 'width .15s, padding .15s' : '',
+    padding: show ? '0 4px' : '0',
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    position: floating ? 'absolute' : 'relative',
+    maxWidth: floating ? undefined : 'calc(100vw - 698px)',
+    borderRight: '1px solid',
+    borderColor: theme.colors.borderColor,
+  };
+});
 export const StyledSidebarSwitchWrapper = styled('div')(() => {
  return {
    height: '48px',
+    flexShrink: 0,
    padding: '0 16px',
    ...displayFlex('flex-start', 'center'),
  };
 });
-export const StyledSlidebarWrapper = styled('div')(() => {
+export const StyledSliderBarInnerWrapper = styled('div')(() => {
  return {
    flexGrow: 1,
    overflowX: 'hidden',
@ -70,3 +79,52 @@ export const StyledNewPageButton = styled('button')(({ theme }) => {
    },
  };
 });
+export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
+  ({ theme, active }) => {
+    return {
+      transition: 'opacity .15s',
+      pointerEvents: active ? 'auto' : 'none',
+      opacity: active ? 1 : 0,
+      display: active ? 'block' : 'none',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: theme.zIndex.modal - 1,
+      background: theme.colors.modalBackground,
+    };
+  }
+);
+export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
+  ({ theme }) => {
+    return {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: '12px',
+      transform: 'translateX(50%)',
+      cursor: 'col-resize',
+      zIndex: theme.zIndex.modal + 1,
+      userSelect: 'none',
+      ':hover > *': {
+        background: 'rgba(0, 0, 0, 0.1)',
+      },
+    };
+  }
+);
+export const StyledSliderResizerInner = styled('div')<{ isResizing: boolean }>(
+  ({ isResizing }) => {
+    return {
+      transition: 'background .15s .1s',
+      position: 'absolute',
+      top: 0,
+      right: '50%',
+      bottom: 0,
+      transform: 'translateX(0.5px)',
+      width: '2px',
+      background: isResizing ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
+    };
+  }
+);
--- a/apps/web/src/hooks/affine/use-sidebar-status.ts
+++ b/apps/web/src/hooks/affine/use-sidebar-status.ts
@ -1,8 +1,18 @@
-import { useAtom } from 'jotai';
+import { atom, useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';

 const sideBarOpenAtom = atomWithStorage('sidebarOpen', true);
+const sideBarWidthAtom = atomWithStorage('sidebarWidth', 256);
+const sidebarResizingAtom = atom(false);

 export function useSidebarStatus() {
  return useAtom(sideBarOpenAtom);
 }
+
+export function useSidebarWidth() {
+  return useAtom(sideBarWidthAtom);
+}
+
+export function useSidebarResizing() {
+  return useAtom(sidebarResizingAtom);
+}
--- a/apps/web/src/layouts/index.tsx
+++ b/apps/web/src/layouts/index.tsx
@ -26,6 +26,7 @@ import { HelpIsland } from '../components/pure/help-island';
 import { PageLoading } from '../components/pure/loading';
 import WorkSpaceSliderBar from '../components/pure/workspace-slider-bar';
 import { useAffineRefreshAuthToken } from '../hooks/affine/use-affine-refresh-auth-token';
+import { useSidebarResizing } from '../hooks/affine/use-sidebar-status';
 import { useCurrentPageId } from '../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useBlockSuiteWorkspaceHelper } from '../hooks/use-blocksuite-workspace-helper';
@ -37,7 +38,12 @@ import { WorkspacePlugins } from '../plugins';
 import { ModalProvider } from '../providers/ModalProvider';
 import type { AllWorkspace } from '../shared';
 import { pathGenerator, publicPathGenerator } from '../shared';
-import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
+import {
+  MainContainer,
+  MainContainerWrapper,
+  StyledPage,
+  StyledToolWrapper,
+} from './styles';

 declare global {
  // eslint-disable-next-line no-var
@ -246,6 +252,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
  const handleOpenQuickSearchModal = useCallback(() => {
    setOpenQuickSearchModalAtom(true);
  }, [setOpenQuickSearchModalAtom]);
+  const [resizingSidebar] = useSidebarResizing();
  const lock = useAtomValue(workspaceLockAtom);
  if (lock) {
    return <PageLoading />;
@ -256,7 +263,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
      <Head>
        <title>{title}</title>
      </Head>
-      <StyledPage>
+      <StyledPage resizing={resizingSidebar}>
        <WorkSpaceSliderBar
          isPublicWorkspace={isPublicWorkspace}
          onOpenQuickSearchModal={handleOpenQuickSearchModal}
@ -268,23 +275,25 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
          currentPath={router.asPath.split('?')[0]}
          paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
        />
-        <StyledWrapper className="main-container">
-          <AffineWorkspaceEffect />
-          {children}
-          <StyledToolWrapper>
-            {/* fixme(himself65): remove this */}
-            <div id="toolWrapper" style={{ marginBottom: '12px' }}>
-              {/* Slot for block hub */}
-            </div>
-            {!isPublicWorkspace && (
-              <HelpIsland
-                showList={
-                  router.query.pageId ? undefined : ['whatNew', 'contact']
-                }
-              />
-            )}
-          </StyledToolWrapper>
-        </StyledWrapper>
+        <MainContainerWrapper>
+          <MainContainer className="main-container">
+            <AffineWorkspaceEffect />
+            {children}
+            <StyledToolWrapper>
+              {/* fixme(himself65): remove this */}
+              <div id="toolWrapper" style={{ marginBottom: '12px' }}>
+                {/* Slot for block hub */}
+              </div>
+              {!isPublicWorkspace && (
+                <HelpIsland
+                  showList={
+                    router.query.pageId ? undefined : ['whatNew', 'contact']
+                  }
+                />
+              )}
+            </StyledToolWrapper>
+          </MainContainer>
+        </MainContainerWrapper>
      </StyledPage>
      <QuickSearch />
    </>
--- a/apps/web/src/layouts/public-workspace-layout.tsx
+++ b/apps/web/src/layouts/public-workspace-layout.tsx
@ -14,7 +14,7 @@ import {
 } from '../atoms/public-workspace';
 import { StyledTableContainer } from '../components/blocksuite/block-suite-page-list/page-list/styles';
 import { useRouterTitle } from '../hooks/use-router-title';
-import { StyledPage, StyledWrapper } from './styles';
+import { MainContainer, StyledPage } from './styles';

 const QuickSearchModal = dynamic(
  () => import('../components/pure/quick-search-modal')
@ -46,9 +46,9 @@ const PublicWorkspaceLayoutInner: React.FC<React.PropsWithChildren> = props => {
        <title>{title}</title>
      </Head>
      <StyledPage>
-        <StyledWrapper className="main-container">
+        <MainContainer className="main-container">
          {props.children}
-        </StyledWrapper>
+        </MainContainer>
        <Suspense fallback="">
          {/* `publicBlockSuiteAtom` is available only when `publicWorkspaceIdAtom` loaded */}
          {workspaceId && <PublicQuickSearch />}
--- a/apps/web/src/layouts/styles.ts
+++ b/apps/web/src/layouts/styles.ts
@ -1,15 +1,21 @@
 import { styled } from '@affine/component';

-export const StyledPage = styled('div')(({ theme }) => {
-  return {
-    height: '100vh',
-    minHeight: '450px',
-    backgroundColor: theme.colors.pageBackground,
-    transition: 'background-color .5s',
-    display: 'flex',
-    flexGrow: '1',
-  };
-});
+export const StyledPage = styled('div')<{ resizing?: boolean }>(
+  ({ theme, resizing }) => {
+    return {
+      cursor: resizing ? 'col-resize' : 'default',
+      height: '100vh',
+      backgroundColor: theme.colors.pageBackground,
+      transition: 'background-color .5s',
+      display: 'flex',
+      flexGrow: '1',
+      '--affine-editor-width': '686px',
+      [theme.breakpoints.down('sm')]: {
+        '--affine-editor-width': '550px',
+      },
+    };
+  }
+);

 export const StyledWrapper = styled('div')(() => {
  return {
@ -19,11 +25,34 @@ export const StyledWrapper = styled('div')(() => {
  };
 });

+export const MainContainerWrapper = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    flexGrow: 1,
+    position: 'relative',
+    maxWidth: '100vw',
+    overflow: 'auto',
+  };
+});
+
+export const MainContainer = styled('div')(({ theme }) => {
+  return {
+    position: 'relative',
+    flexGrow: 1,
+    [theme.breakpoints.up('md')]: {
+      minWidth: '686px',
+    },
+  };
+});
+
 export const StyledToolWrapper = styled('div')(({ theme }) => {
  return {
    position: 'fixed',
-    right: '30px',
+    right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
    bottom: '30px',
    zIndex: theme.zIndex.popover,
+    [theme.breakpoints.down('md')]: {
+      right: '30px',
+    },
  };
 });
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@ -24,7 +24,7 @@ import { initPage } from '../../../utils';
 export const NavContainer = styled('div')(({ theme }) => {
  return {
    width: '100vw',
-    height: '60px',
+    height: '48px',
    ...displayFlex('space-between', 'center'),
    backgroundColor: theme.colors.pageBackground,
  };
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@ -191,15 +191,18 @@ input[type='number']::-webkit-outer-spin-button {
  position: relative;
  width: 100%;
  height: 100%;
+  padding: 0 2rem;
 }

 .affine-default-page-block-title-container {
  margin-top: 78px;
  margin-bottom: 40px;
+  transition: margin-top 0.2s;
 }

 .affine-default-page-block-container {
-  max-width: 686px;
+  transition: max-width 0.2s;
+  min-width: 550px;
 }

 affine-block-hub {
--- a/packages/component/src/index.ts
+++ b/packages/component/src/index.ts
@ -27,6 +27,7 @@ declare module '@mui/material/styles' {
      tooltipBackground: string;
      hoverBackground: string;
      innerHoverBackground: string;
+      modalBackground: string;
      // Use for the quick search tips background
      backgroundTertiaryColor: string;
      codeBackground: string;
@ -103,6 +104,7 @@ declare module '@mui/material/styles' {
      tooltipBackground: string;
      hoverBackground: string;
      innerHoverBackground: string;
+      modalBackground: string;
      // Use for the quick search tips background
      backgroundTertiaryColor: string;
      codeBackground: string;
--- a/packages/component/src/styles/theme.ts
+++ b/packages/component/src/styles/theme.ts
@ -29,6 +29,7 @@ export const getLightTheme = (
      cardHoverBackground: '#f8f9ff',
      warningBackground: '#FFF9C7',
      errorBackground: '#FFDED8',
+      modalBackground: 'rgba(0, 0, 0, 0.6)',

      textColor: '#424149',
      secondaryTextColor: '#8E8D91',
@ -83,6 +84,15 @@ export const getLightTheme = (
    radius: {
      popover: '10px',
    },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 640,
+        md: 960,
+        lg: 1280,
+        xl: 1920,
+      },
+    },
  };
 };

@ -113,6 +123,7 @@ export const getDarkTheme = (
      cardHoverBackground: '#363636',
      warningBackground: '#FFF9C7',
      errorBackground: '#FFDED8',
+      modalBackground: 'rgba(0, 0, 0, 0.8)',

      textColor: '#fff',
      secondaryTextColor: '#8E8D91',
@ -207,7 +218,6 @@ export const globalThemeVariables: (
    '--affine-paragraph-space': theme.space.paragraph,
    '--affine-popover-radius': theme.radius.popover,

-    '--affine-editor-width': '720px',
    '--affine-zoom': '1',
    '--affine-scale': 'calc(1 / var(--affine-zoom))',
  };
--- a/packages/component/src/styles/types.ts
+++ b/packages/component/src/styles/types.ts
@ -27,6 +27,7 @@ export interface AffineTheme {
    tooltipBackground: string;
    hoverBackground: string;
    innerHoverBackground: string;
+    modalBackground: string;
    // Use for the quick search tips background
    backgroundTertiaryColor: string;
    codeBackground: string;
@ -92,6 +93,15 @@ export interface AffineTheme {
  radius: {
    popover: string;
  };
+  breakpoints: {
+    values: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+  };
 }

 export interface AffineThemeCSSVariables {
@ -150,7 +160,6 @@ export interface AffineThemeCSSVariables {

  '--affine-popover-radius': AffineTheme['radius']['popover'];
  // use for blocksuite
-  '--affine-editor-width': CSSProperties['width'];
  '--affine-zoom': CSSProperties['zoom'];
  '--affine-scale': string;
 }
--- a/packages/component/src/ui/modal/styles.ts
+++ b/packages/component/src/ui/modal/styles.ts
@ -12,10 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
    bottom: '0',
    top: '0',
    left: '0',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? 'rgba(58, 76, 92, 0.2)'
-        : 'rgba(34, 34, 34, 0.6)',
+    backgroundColor: theme.colors.modalBackground,
  };
 });

--- a/tests/parallels/layout.spec.ts
+++ b/tests/parallels/layout.spec.ts
@ -9,7 +9,7 @@ test.describe('Layout ui', () => {
    await openHomePage(page);
    await waitMarkdownImported(page);
    await page.getByTestId('sliderBar-arrowButton-collapse').click();
-    const sliderBarArea = page.getByTestId('sliderBar');
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
    await expect(sliderBarArea).not.toBeVisible();
  });

@ -17,10 +17,61 @@ test.describe('Layout ui', () => {
    await openHomePage(page);
    await waitMarkdownImported(page);
    await page.getByTestId('sliderBar-arrowButton-collapse').click();
-    const sliderBarArea = page.getByTestId('sliderBar');
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
    await expect(sliderBarArea).not.toBeVisible();

    await page.getByTestId('sliderBar-arrowButton-expand').click();
    await expect(sliderBarArea).toBeVisible();
  });
+
+  test('Click resizer can close sidebar', async ({ page }) => {
+    await openHomePage(page);
+    await waitMarkdownImported(page);
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
+    await expect(sliderBarArea).toBeVisible();
+
+    await page.getByTestId('sliderBar-resizer').click();
+    await expect(sliderBarArea).not.toBeVisible();
+  });
+
+  test('Drag resizer can resize sidebar', async ({ page }) => {
+    await openHomePage(page);
+    await waitMarkdownImported(page);
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
+    await expect(sliderBarArea).toBeVisible();
+
+    const sliderResizer = page.getByTestId('sliderBar-resizer');
+    await sliderResizer.hover();
+    await page.mouse.down();
+    await page.mouse.move(400, 300, {
+      steps: 10,
+    });
+    await page.mouse.up();
+    const boundingBox = await page.getByTestId('sliderBar-root').boundingBox();
+    expect(boundingBox?.width).toBe(400);
+  });
+
+  test('Sidebar in between sm & md breakpoint', async ({ page }) => {
+    await openHomePage(page);
+    await waitMarkdownImported(page);
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
+    const sliderBarModalBackground = page.getByTestId(
+      'sliderBar-modalBackground'
+    );
+    await expect(sliderBarArea).toBeVisible();
+    await expect(sliderBarModalBackground).not.toBeVisible();
+
+    await page.setViewportSize({
+      width: 768,
+      height: 1024,
+    });
+    await expect(sliderBarModalBackground).toBeVisible();
+
+    // click modal background can close sidebar
+    await sliderBarModalBackground.click({
+      force: true,
+      position: { x: 600, y: 150 },
+    });
+    await expect(sliderBarArea).not.toBeVisible();
+  });
 });
--- a/tests/parallels/quick-search.spec.ts
+++ b/tests/parallels/quick-search.spec.ts
@ -180,7 +180,7 @@ test.describe('Novice guidance for quick search', () => {
    const quickSearchTips = page.locator('[data-testid=quick-search-tips]');
    await expect(quickSearchTips).not.toBeVisible();
    await page.getByTestId('sliderBar-arrowButton-collapse').click();
-    const sliderBarArea = page.getByTestId('sliderBar');
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
    await expect(sliderBarArea).not.toBeVisible();
    await expect(quickSearchTips).toBeVisible();
    await page.locator('[data-testid=quick-search-got-it]').click();
--- a/tests/parallels/subpage.spec.ts
+++ b/tests/parallels/subpage.spec.ts
@ -9,7 +9,7 @@ test.describe('subpage', () => {
    await openHomePage(page);
    await waitMarkdownImported(page);
    await page.getByTestId('sliderBar-arrowButton-collapse').click();
-    const sliderBarArea = page.getByTestId('sliderBar');
+    const sliderBarArea = page.getByTestId('sliderBar-inner');
    await expect(sliderBarArea).not.toBeVisible();
  });
 });