fix: z-index on app sidebar (#2761)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/components/app-sidebar/index.css.ts

@@ -13,13 +13,14 @@ export const navWrapperStyle = style({
   width: navWidthVar,
   minWidth: navWidthVar,
   height: '100%',
-  zIndex: 2,
+  zIndex: 1,
   paddingBottom: '8px',
   backgroundColor: 'transparent',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
       position: 'absolute',
       width: `calc(${navWidthVar})`,
+      zIndex: 4,
       backgroundColor: 'var(--affine-background-primary-color)',
       selectors: {
         '&[data-open="false"]': {
@@ -97,7 +98,6 @@ export const sidebarFloatMaskStyle = style({
   left: 0,
   right: '100%',
   bottom: 0,
-  zIndex: 1,
   background: 'var(--affine-background-modal-color)',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
@@ -106,6 +106,7 @@ export const sidebarFloatMaskStyle = style({
           opacity: 1,
           pointerEvents: 'auto',
           right: '0',
+          zIndex: 3,
         },
       },
     },

packages/component/src/components/workspace/index.css.ts

@@ -54,7 +54,7 @@ export const mainContainerStyle = style({
   position: 'relative',
   flexGrow: 1,
   maxWidth: '100%',
-  zIndex: 0,
+  zIndex: 2,
   backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
     '&[data-is-desktop="true"]': {