fix: some style updates (#2348)

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -1,5 +1,8 @@
 import { BrowserWarning } from '@affine/component/affine-banner';
-import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
+import {
+  appSidebarFloatingAtom,
+  appSidebarOpenAtom,
+} from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
@@ -164,6 +167,8 @@ export const Header = forwardRef<
   const open = useAtomValue(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
 
+  const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
+
   const mode = useCurrentMode();
   return (
     <div
@@ -171,6 +176,7 @@ export const Header = forwardRef<
       ref={ref}
       data-has-warning={showWarning}
       data-open={open}
+      data-sidebar-floating={appSidebarFloating}
       {...props}
     >
       {showGuideDownloadClientTip ? (

apps/web/src/components/blocksuite/workspace-header/styles.css.ts

@@ -1,3 +1,4 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { style } from '@vanilla-extract/css';
 
 export const headerContainer = style({
@@ -6,15 +7,16 @@ export const headerContainer = style({
   position: 'sticky',
   top: 0,
   background: 'var(--affine-background-primary-color)',
-  // @ts-ignore
-  WebkitAppRegion: 'drag',
   zIndex: 'var(--affine-z-index-popover)',
   selectors: {
     '&[data-has-warning="true"]': {
       height: '96px',
     },
+    '&[data-sidebar-floating="false"]': {
+      WebkitAppRegion: 'drag',
+    },
   },
-});
+} as ComplexStyleRule);
 
 export const header = style({
   flexShrink: 0,
@@ -59,13 +61,12 @@ export const title = style({
     '(max-width: 768px)': {
       selectors: {
         '&[data-open="true"]': {
-          // @ts-ignore
           WebkitAppRegion: 'no-drag',
         },
       },
     },
   },
-});
+} as ComplexStyleRule);
 
 export const titleWrapper = style({
   height: '100%',
@@ -187,7 +188,6 @@ export const windowAppControlsWrapper = style({
 });
 
 export const windowAppControl = style({
-  // @ts-ignore
   WebkitAppRegion: 'no-drag',
   cursor: 'pointer',
   display: 'inline-flex',
@@ -204,4 +204,4 @@ export const windowAppControl = style({
       background: 'var(--affine-background-tertiary-color)',
     },
   },
-});
+} as ComplexStyleRule);