fix(component): windows client does not have app controls on some pages (#8176)

close AF-1266

packages/frontend/component/src/components/affine-other-page-layout/index.css.ts

@@ -27,6 +27,12 @@ export const topNav = style({
     },
   },
 });
+export const draggableHeader = style({
+  height: '52px',
+  width: '100%',
+  position: 'fixed',
+  ['WebkitAppRegion' as string]: 'drag',
+});
 export const topNavLinks = style({
   display: 'flex',
   columnGap: 4,

packages/frontend/component/src/components/affine-other-page-layout/layout.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@affine/component/ui/button';
 import { useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
-import { useCallback } from 'react';
+import { type ReactNode, useCallback } from 'react';
 
 import { DesktopNavbar } from './desktop-navbar';
 import * as styles from './index.css';
@@ -10,7 +10,7 @@ import { MobileNavbar } from './mobile-navbar';
 export const AffineOtherPageLayout = ({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   const t = useI18n();
 
@@ -20,7 +20,9 @@ export const AffineOtherPageLayout = ({
 
   return (
     <div className={styles.root}>
-      {environment.isElectron ? null : (
+      {environment.isElectron ? (
+        <div className={styles.draggableHeader} />
+      ) : (
         <div className={styles.topNav}>
           <a href="/" rel="noreferrer" className={styles.affineLogo}>
             <Logo1Icon width={24} height={24} />