fix(electron): app fallback styles (#8225)

packages/frontend/apps/electron/renderer/app.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const fallback = style({
+  paddingTop: 52,
+});

packages/frontend/apps/electron/renderer/shell/shell.css.ts

@@ -18,14 +18,13 @@ export const root = style({
 
 export const appTabsHeader = style({
   zIndex: 1,
+  position: 'absolute',
+  top: 0,
 });
 
 export const fallbackRoot = style({
-  position: 'absolute',
-  paddingTop: 52,
   width: '100%',
   height: '100%',
-  zIndex: 0,
 });
 
 export const splitViewFallback = style({

packages/frontend/core/src/components/affine/app-container.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const electronFallback = style({
+  paddingTop: 52,
+});

packages/frontend/core/src/components/affine/app-container.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
@@ -7,6 +8,7 @@ import {
   AppContainer as AppContainerWithoutSettings,
   MainContainerFallback,
 } from '../workspace';
+import * as styles from './app-container.css';
 
 export const AppContainer = (props: WorkspaceRootProps) => {
   const { appSettings } = useAppSettingHelper();
@@ -31,7 +33,12 @@ export const AppFallback = ({
   className?: string;
 }>): ReactElement => {
   return (
-    <AppContainer className={className}>
+    <AppContainer
+      className={clsx(
+        className,
+        environment.isElectron && styles.electronFallback
+      )}
+    >
       <AppSidebarFallback />
       <MainContainerFallback>{children}</MainContainerFallback>
     </AppContainer>