fix: settings style update (#3161)

(cherry picked from commit d88a21d24a)

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

@@ -57,9 +57,9 @@ export const mainContainerStyle = style({
   zIndex: 2,
   backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
-    '&[data-is-desktop="true"]': {
-      margin: '8px 8px 8px 8px',
-      borderRadius: '8px',
+    '&[data-show-padding="true"]': {
+      margin: '8px',
+      borderRadius: '5px',
       overflow: 'hidden',
       boxShadow: 'var(--affine-shadow-1)',
       '@media': {
@@ -70,7 +70,10 @@ export const mainContainerStyle = style({
         },
       },
     },
-    '&[data-is-desktop="true"]:before': {
+    '&[data-show-padding="true"][data-is-macos="true"]': {
+      borderRadius: '6px',
+    },
+    '&[data-show-padding="true"]:before': {
       content: '""',
       position: 'absolute',
       height: '8px',

packages/component/src/components/workspace/index.tsx

@@ -1,4 +1,3 @@
-import { isDesktop } from '@affine/env/constant';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 
@@ -22,7 +21,7 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
     <div
       className={clsx(appStyle, {
         'noisy-background': noisyBackground,
-        'blur-background': isDesktop && useBlurBackground,
+        'blur-background': environment.isDesktop && useBlurBackground,
       })}
       data-noise-background={noisyBackground}
       data-is-resizing={resizing}
@@ -34,15 +33,24 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
 
 export type MainContainerProps = PropsWithChildren<{
   className?: string;
-}>;
+  padding?: boolean;
+}> &
+  React.HTMLAttributes<HTMLDivElement>;
 
-export const MainContainer = (props: MainContainerProps): ReactElement => {
+export const MainContainer = ({
+  className,
+  padding,
+  children,
+  ...props
+}: MainContainerProps): ReactElement => {
   return (
     <div
-      className={clsx(mainContainerStyle, 'main-container', props.className)}
-      data-is-desktop={isDesktop}
+      {...props}
+      className={clsx(mainContainerStyle, 'main-container', className)}
+      data-is-macos={environment.isBrowser && environment.isMacOs}
+      data-show-padding={padding}
     >
-      {props.children}
+      {children}
     </div>
   );
 };