fix: some minor ui issues (#1783)

apps/web/src/layouts/index.tsx

@@ -26,7 +26,12 @@ 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 {
+  useSidebarFloating,
+  useSidebarResizing,
+  useSidebarStatus,
+  useSidebarWidth,
+} 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';
@@ -246,14 +251,18 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
     setOpenWorkspacesModal(true);
   }, [setOpenWorkspacesModal]);
 
-  const [openQuickSearchModal, setOpenQuickSearchModalAtom] = useAtom(
-    openQuickSearchModalAtom
-  );
+  const [, setOpenQuickSearchModalAtom] = useAtom(openQuickSearchModalAtom);
   const handleOpenQuickSearchModal = useCallback(() => {
     setOpenQuickSearchModalAtom(true);
   }, [setOpenQuickSearchModalAtom]);
   const [resizingSidebar] = useSidebarResizing();
   const lock = useAtomValue(workspaceLockAtom);
+  const [sidebarOpen] = useSidebarStatus();
+  const sidebarFloating = useSidebarFloating();
+  const [sidebarWidth] = useSidebarWidth();
+  const paddingLeft =
+    sidebarFloating || !sidebarOpen ? '0' : `${sidebarWidth}px`;
+  const [resizing] = useSidebarResizing();
   if (lock) {
     return <PageLoading />;
   }
@@ -275,7 +284,10 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
           currentPath={router.asPath.split('?')[0]}
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
-        <MainContainerWrapper>
+        <MainContainerWrapper
+          resizing={resizing}
+          style={{ paddingLeft: paddingLeft }}
+        >
           <MainContainer className="main-container">
             <AffineWorkspaceEffect />
             {children}

apps/web/src/layouts/styles.ts

@@ -4,6 +4,8 @@ export const StyledPage = styled('div')<{ resizing?: boolean }>(
   ({ theme, resizing }) => {
     return {
       cursor: resizing ? 'col-resize' : 'default',
+      width: '100%',
+      position: 'relative',
       height: '100vh',
       transition: 'background-color .5s',
       display: 'flex',
@@ -24,21 +26,24 @@ export const StyledWrapper = styled('div')(() => {
   };
 });
 
-export const MainContainerWrapper = styled('div')(({ theme }) => {
-  return {
-    display: 'flex',
-    flexGrow: 1,
-    position: 'relative',
-    maxWidth: '100vw',
-    overflow: 'auto',
-    backgroundColor: theme.colors.pageBackground,
-  };
-});
+export const MainContainerWrapper = styled('div')<{ resizing: boolean }>(
+  ({ theme, resizing }) => {
+    return {
+      display: 'flex',
+      flexGrow: 1,
+      position: 'relative',
+      maxWidth: '100vw',
+      overflow: 'auto',
+      transition: resizing ? '' : 'padding-left .25s',
+    };
+  }
+);
 
 export const MainContainer = styled('div')(({ theme }) => {
   return {
     position: 'relative',
     flexGrow: 1,
+    backgroundColor: theme.colors.pageBackground,
     [theme.breakpoints.up('md')]: {
       minWidth: '686px',
     },