feat(core): use contain strict optimizing performance (#8553)

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -34,7 +34,7 @@ export const root = style({
       },
     '&[data-open="true"][data-handle-position="left"][data-is-floating="true"]':
       {
-        transform: `translateX(-${panelWidthVar})`,
+        transform: `translateX(calc(${panelWidthVar} * -1))`,
       },
     '&[data-enable-animation="true"]': {
       transition: `margin-left ${animationTimeout}, margin-right ${animationTimeout}, transform ${animationTimeout}, background ${animationTimeout}`,
@@ -46,6 +46,12 @@ export const root = style({
   },
 });
 
+export const content = style({
+  contain: 'strict',
+  width: '100%',
+  height: '100%',
+});
+
 export const panelContent = style({
   position: 'relative',
   height: '100%',

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -169,7 +169,9 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
         data-handle-position={resizeHandlePos}
         data-enable-animation={enableAnimation && !resizing}
       >
-        {!(status === 'exited' && unmountOnExit !== false) && children}
+        <div className={styles.content}>
+          {!(status === 'exited' && unmountOnExit !== false) && children}
+        </div>
         <ResizeHandle
           resizeHandlePos={resizeHandlePos}
           resizeHandleOffset={resizeHandleOffset}