feat: enhance root div styles (#2295)

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

@@ -0,0 +1,50 @@
+import { style } from '@vanilla-extract/css';
+
+import { breakpoints } from '../../styles/mui-theme';
+export const appStyle = style({
+  width: '100%',
+  position: 'relative',
+  height: '100vh',
+  transition: 'background-color .5s',
+  display: 'flex',
+  flexGrow: '1',
+  flexDirection: 'row',
+  selectors: {
+    '&[data-is-resizing="true"]': {
+      cursor: 'col-resize',
+    },
+  },
+  vars: {
+    '--affine-editor-width': '686px',
+  },
+  '@media': {
+    [breakpoints.down('sm', true)]: {
+      vars: {
+        '--affine-editor-width': '550px',
+      },
+    },
+  },
+});
+
+export const mainContainerStyle = style({
+  position: 'relative',
+  flexGrow: 1,
+  maxWidth: '100%',
+  backgroundColor: 'var(--affine-background-primary-color)',
+});
+
+export const toolStyle = style({
+  position: 'fixed',
+  right: '30px',
+  bottom: '30px',
+  zIndex: 'var(--affine-z-index-popover)',
+  '@media': {
+    [breakpoints.down('md', true)]: {
+      right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
+    },
+    [breakpoints.down('sm', true)]: {
+      right: '5px',
+      bottom: '5px',
+    },
+  },
+});

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

@@ -0,0 +1,34 @@
+import { clsx } from 'clsx';
+import type { PropsWithChildren, ReactElement } from 'react';
+
+import { appStyle, mainContainerStyle, toolStyle } from './index.css';
+
+export type WorkspaceRootProps = PropsWithChildren<{
+  resizing?: boolean;
+}>;
+
+export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
+  return (
+    <div className={appStyle} data-is-resizing={props.resizing}>
+      {props.children}
+    </div>
+  );
+};
+
+export type MainContainerProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export const MainContainer = (props: MainContainerProps): ReactElement => {
+  return (
+    <div
+      className={clsx(mainContainerStyle, 'main-container', props.className)}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const ToolContainer = (props: PropsWithChildren): ReactElement => {
+  return <div className={toolStyle}>{props.children}</div>;
+};