diff --git a/packages/component/src/components/app-sidebar/index.css.ts b/packages/component/src/components/app-sidebar/index.css.ts
index 2443f1a599..5d7c512bcf 100644
--- a/packages/component/src/components/app-sidebar/index.css.ts
+++ b/packages/component/src/components/app-sidebar/index.css.ts
@@ -35,7 +35,7 @@ export const navWrapperStyle = style({
     '&[data-enable-animation="true"]': {
       transition: 'margin-left .3s, width .3s',
     },
-    '&.has-background': {
+    '&[data-is-floating="false"].has-background': {
       backgroundColor: 'var(--affine-white-60)',
       borderRight: '1px solid var(--affine-border-color)',
     },
diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx
index aab102c6f5..09630ec9d0 100644
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@@ -2,6 +2,7 @@ import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
+import debounce from 'lodash/debounce';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
@@ -77,10 +78,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
       setAppSidebarFloating(isFloating && !!open);
     }
 
-    onResize();
-    window.addEventListener('resize', onResize);
+    const dOnResize = debounce(onResize, 50);
+    window.addEventListener('resize', dOnResize);
     return () => {
-      window.removeEventListener('resize', onResize);
+      window.removeEventListener('resize', dOnResize);
     };
   }, [appSidebarWidth, open, setAppSidebarFloating, setOpen]);