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

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>