refactor(core): use element atom (#4026)

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

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { forwardRef } from 'react';
 
 import { AppSidebarFallback } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
@@ -36,23 +37,27 @@ export interface MainContainerProps extends HTMLAttributes<HTMLDivElement> {
   padding?: boolean;
 }
 
-export const MainContainer = ({
-  className,
-  padding,
-  children,
-  ...props
-}: PropsWithChildren<MainContainerProps>): ReactElement => {
+export const MainContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<MainContainerProps>
+>(function MainContainer(
+  { className, padding, children, ...props },
+  ref
+): ReactElement {
   return (
     <div
       {...props}
-      className={clsx(mainContainerStyle, 'main-container', className)}
+      className={clsx(mainContainerStyle, className)}
       data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={!!padding}
+      ref={ref}
     >
       {children}
     </div>
   );
-};
+});
+
+MainContainer.displayName = 'MainContainer';
 
 export const ToolContainer = (props: PropsWithChildren): ReactElement => {
   return <div className={toolStyle}>{props.children}</div>;