diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index d142800ff..ee96252fa 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -101,7 +101,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
       <div
         className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full p-5 duration-200 md:block", {
           "translate-x-0": sidePeekVisible,
-          "w-40 lg:w-56": !isFullWidth,
+          "w-[10rem] lg:w-[14rem]": !isFullWidth,
           "w-[5%]": isFullWidth,
         })}
       >
@@ -113,8 +113,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
         )}
       </div>
       <div
-        className={cn("h-full w-full pt-5", {
-          "md:w-[calc(100%-10rem)] xl:w-[calc(100%-14rem-14rem)]": !isFullWidth,
+        className={cn("h-full w-full pt-5 duration-200", {
+          "md:w-[calc(100%-10rem)] xl:w-[calc(100%-28rem)]": !isFullWidth,
           "md:w-[90%]": isFullWidth,
         })}
       >
@@ -169,8 +169,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
         </div>
       </div>
       <div
-        className={cn("hidden xl:block flex-shrink-0", {
-          "w-40 lg:w-56": !isFullWidth,
+        className={cn("hidden xl:block flex-shrink-0 duration-200", {
+          "w-[10rem] lg:w-[14rem]": !isFullWidth,
           "w-[5%]": isFullWidth,
         })}
       />