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

This commit is contained in:
Shahed Nasser
2025-07-24 15:59:02 +03:00
committed by GitHub
parent 9bb4c0306b
commit ab65ddc0f1
2 changed files with 25 additions and 22 deletions

View File

@@ -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

View File

@@ -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>
)
}