docs: fix bug in layout change when using some chrome extensions (#13031)

www/packages/docs-ui/src/layouts/main-content.tsx

@@ -35,10 +35,11 @@ export const MainContentLayout = ({
     if (!isBrowser) {
       return
     }
+    const rootLayout = document.getElementById("root-layout")
     if (desktopSidebarOpen) {
-      document.body.classList.add("lg:grid-cols-[221px_1fr]")
+      rootLayout?.classList.add("lg:grid-cols-[221px_1fr]")
     } else {
-      document.body.classList.remove("lg:grid-cols-[221px_1fr]")
+      rootLayout?.classList.remove("lg:grid-cols-[221px_1fr]")
     }
   }, [desktopSidebarOpen, isBrowser])
 
@@ -70,8 +71,7 @@ export const MainContentLayout = ({
         <div
           className={clsx(
             "pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4",
-            showContentMenu &&
+            showContentMenu && "grid grid-cols-1 lg:mx-auto",
-              "grid grid-cols-1 lg:mx-auto",
             desktopSidebarOpen && "lg:grid-cols-[1fr_221px]",
             chatOpened && showCollapsedNavbar && "pl-docs_1",
             contentClassName

www/packages/docs-ui/src/layouts/root.tsx

@@ -19,14 +19,16 @@ export const RootLayout = ({
   ...mainProps
 }: RootLayoutProps) => {
   return (
-    <body
+    <body className={clsx("h-screen w-full overflow-hidden")}>
+      <div
         className={clsx(
           "bg-medusa-bg-subtle font-base text-medium w-full",
           "text-medusa-fg-base",
-        "h-screen overflow-hidden",
+          "h-full overflow-hidden",
           "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
           bodyClassName
         )}
+        id="root-layout"
       >
         <RootProviders>
           <ProvidersComponent>
@@ -37,6 +39,7 @@ export const RootLayout = ({
             </div>
           </ProvidersComponent>
         </RootProviders>
+      </div>
     </body>
   )
 }