diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts
index 24dff2f28d..b8d4532f94 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@@ -15,9 +15,9 @@ export const StyledSliderBarWrapper = styled('div')<{
       userSelect: 'none',
     },
     zIndex: theme.zIndex.modal,
-    transition: resizing ? '' : 'transform .3s',
+    transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
     transform: show ? 'translateX(0)' : 'translateX(-100%)',
-    maxWidth: floating ? undefined : 'calc(100vw - 698px)',
+    maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
     background:
       !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
     borderRight: macosElectron ? '' : '1px solid',
diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx
index 751916f193..34e2831d95 100644
--- a/apps/web/src/layouts/index.tsx
+++ b/apps/web/src/layouts/index.tsx
@@ -264,8 +264,13 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useSidebarStatus();
   const sidebarFloating = useSidebarFloating();
   const [sidebarWidth, setSliderWidth] = useSidebarWidth();
-  const actualSidebarWidth = sidebarFloating || !sidebarOpen ? 0 : sidebarWidth;
-  const width = `calc(100% - ${actualSidebarWidth}px)`;
+  const actualSidebarWidth = !sidebarOpen
+    ? 0
+    : sidebarFloating
+    ? 'calc(10vw + 400px)'
+    : sidebarWidth;
+  const mainWidth =
+    sidebarOpen && !sidebarFloating ? `calc(100% - ${sidebarWidth}px)` : '100%';
   const [resizing] = useSidebarResizing();
 
   const onResizeStart = useCallback(() => {
@@ -332,7 +337,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
             </StyledSliderResizer>
           )}
         </StyledSpacer>
-        <MainContainerWrapper resizing={resizing} style={{ width: width }}>
+        <MainContainerWrapper resizing={resizing} style={{ width: mainWidth }}>
           <MainContainer className="main-container">
             <AffineWorkspaceEffect />
             {children}
diff --git a/apps/web/src/layouts/styles.ts b/apps/web/src/layouts/styles.ts
index d5dd65b37f..3e52a0b5cc 100644
--- a/apps/web/src/layouts/styles.ts
+++ b/apps/web/src/layouts/styles.ts
@@ -22,13 +22,13 @@ export const StyledSpacer = styled('div')<{
   sidebarOpen: boolean;
   resizing: boolean;
   floating: boolean;
-}>(({ resizing, sidebarOpen, floating }) => {
+}>(({ resizing, floating }) => {
   return {
-    position: 'relative',
+    position: floating ? 'absolute' : 'relative',
     flexGrow: 1,
-    maxWidth: 'calc(100vw - 698px)',
-    minWidth: !floating && sidebarOpen ? '256px' : '0',
-    transition: resizing ? '' : 'width .3s, min-width .3s',
+    height: '100%',
+    maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
+    transition: resizing ? '' : 'width .3s, min-width .3s, max-width .3s',
   };
 });