docs: fix bug in layout change when using some chrome extensions

shahednasser · shahednasser · commit d3400562586f · 2025-07-24T14:49:19.000+03:00
diff --git a/www/packages/docs-ui/src/layouts/main-content.tsx b/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 &&
-              "grid grid-cols-1 lg:mx-auto",
+            showContentMenu && "grid grid-cols-1 lg:mx-auto",
             desktopSidebarOpen && "lg:grid-cols-[1fr_221px]",
             chatOpened && showCollapsedNavbar && "pl-docs_1",
             contentClassName
diff --git a/www/packages/docs-ui/src/layouts/root.tsx b/www/packages/docs-ui/src/layouts/root.tsx
@@ -19,24 +19,27 @@ export const RootLayout = ({
   ...mainProps
 }: RootLayoutProps) => {
   return (
-    <body
-      className={clsx(
-        "bg-medusa-bg-subtle font-base text-medium w-full",
-        "text-medusa-fg-base",
-        "h-screen overflow-hidden",
-        "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
-        bodyClassName
-      )}
-    >
-      <RootProviders>
-        <ProvidersComponent>
-          <Sidebar {...sidebarProps} />
-          <div className={clsx("relative", "h-screen", "flex")}>
-            <MainContentLayout {...mainProps} />
-            <AiAssistantChatWindow />
-          </div>
-        </ProvidersComponent>
-      </RootProviders>
+    <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-full overflow-hidden",
+          "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
+          bodyClassName
+        )}
+        id="root-layout"
+      >
+        <RootProviders>
+          <ProvidersComponent>
+            <Sidebar {...sidebarProps} />
+            <div className={clsx("relative", "h-screen", "flex")}>
+              <MainContentLayout {...mainProps} />
+              <AiAssistantChatWindow />
+            </div>
+          </ProvidersComponent>
+        </RootProviders>
+      </div>
     </body>
   )
 }
