diff --git a/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts b/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
index d8bb76a88fc9e..36668728ca051 100644
--- a/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
+++ b/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%',
diff --git a/packages/frontend/component/src/components/resize-panel/resize-panel.tsx b/packages/frontend/component/src/components/resize-panel/resize-panel.tsx
index 2d9dea2ad2d63..0e298e3e0533c 100644
--- a/packages/frontend/component/src/components/resize-panel/resize-panel.tsx
+++ b/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}
diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts b/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts
index 4533d8f497aab..c478dd6b3ed4d 100644
--- a/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts
+++ b/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts
@@ -6,6 +6,7 @@ export const root = style({
   height: '54px',
   // 42 + 12
   flexShrink: 0,
+  contain: 'strict',
   width: '100%',
   alignItems: 'stretch',
   transition: 'background-color 0.2s, opacity 0.2s',
diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts b/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts
index a553e324d7b42..1a5afe11f5438 100644
--- a/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts
@@ -8,6 +8,7 @@ export const root = style({
   flexShrink: 0,
   width: '100%',
   alignItems: 'stretch',
+  contain: 'strict',
   transition: 'background-color 0.2s, opacity 0.2s',
   ':hover': {
     backgroundColor: cssVar('hoverColor'),
diff --git a/packages/frontend/core/src/components/page-list/page-group.css.ts b/packages/frontend/core/src/components/page-list/page-group.css.ts
index 663c6c95ebb95..b140f94c9f1ed 100644
--- a/packages/frontend/core/src/components/page-list/page-group.css.ts
+++ b/packages/frontend/core/src/components/page-list/page-group.css.ts
@@ -46,6 +46,7 @@ export const header = style({
   alignItems: 'center',
   padding: '0px 16px 0px 6px',
   height: '28px',
+  contain: 'strict',
   background: cssVar('backgroundPrimaryColor'),
   ':hover': {
     background: cssVar('hoverColorFilled'),
diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts b/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts
index 378a615f47f22..1fe9e06eec6cb 100644
--- a/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts
+++ b/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts
@@ -7,6 +7,7 @@ export const root = style({
   // 42 + 12
   flexShrink: 0,
   width: '100%',
+  contain: 'strict',
   alignItems: 'stretch',
   transition: 'background-color 0.2s, opacity 0.2s',
   ':hover': {
diff --git a/packages/frontend/core/src/modules/workbench/view/route-container.css.ts b/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
index b5742a8063efd..da0e3398d6104 100644
--- a/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
+++ b/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
@@ -20,6 +20,7 @@ export const header = style({
   flexShrink: 0,
   background: cssVar('backgroundPrimaryColor'),
   padding: '0 16px',
+  contain: 'strict',
   '@media': {
     print: {
       display: 'none',
@@ -31,6 +32,7 @@ export const viewBodyContainer = style({
   display: 'flex',
   flex: 1,
   overflow: 'hidden',
+  contain: 'strict',
 });
 
 export const leftSidebarButton = style({
diff --git a/tests/affine-local/e2e/layout.spec.ts b/tests/affine-local/e2e/layout.spec.ts
index 308c5c95f912d..ad060cfbc1f6d 100644
--- a/tests/affine-local/e2e/layout.spec.ts
+++ b/tests/affine-local/e2e/layout.spec.ts
@@ -57,7 +57,7 @@ test('Drag resizer can resize sidebar', async ({ page }) => {
   });
   await page.mouse.up();
   const boundingBox = await page.getByTestId('app-sidebar').boundingBox();
-  expect(boundingBox?.width).toBe(399);
+  expect(Math.floor(boundingBox?.width ?? 0)).toBe(399);
 });
 
 test('Sidebar in between sm & md breakpoint', async ({ page }) => {
diff --git a/tests/affine-local/e2e/subpage.spec.ts b/tests/affine-local/e2e/subpage.spec.ts
deleted file mode 100644
index 60bd74e999e81..0000000000000
--- a/tests/affine-local/e2e/subpage.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { test } from '@affine-test/kit/playwright';
-import { openHomePage } from '@affine-test/kit/utils/load-page';
-import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
-import { expect } from '@playwright/test';
-
-test('Create subpage', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await page
-    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
-    .click();
-  const sliderBarArea = page.getByTestId('sliderBar-inner');
-  await expect(sliderBarArea).not.toBeInViewport();
-});