docs: fix padding when AI assistant is open on some screens (medusajs#12786)

Author: shahednasser

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

@@ -2,7 +2,14 @@
 
 import React, { useEffect } from "react"
 import clsx from "clsx"
-import { MainNav, useIsBrowser, useLayout, useSidebar, useSiteConfig } from ".."
+import {
+  MainNav,
+  useAiAssistant,
+  useIsBrowser,
+  useLayout,
+  useSidebar,
+  useSiteConfig,
+} from ".."
 import { ContentMenu } from "../components/ContentMenu"
 
 export type MainContentLayoutProps = {
@@ -20,8 +27,9 @@ export const MainContentLayout = ({
 }: MainContentLayoutProps) => {
   const { isBrowser } = useIsBrowser()
   const { desktopSidebarOpen } = useSidebar()
-  const { mainContentRef } = useLayout()
+  const { mainContentRef, showCollapsedNavbar } = useLayout()
   const { frontmatter } = useSiteConfig()
+  const { chatOpened } = useAiAssistant()
 
   useEffect(() => {
     if (!isBrowser) {
@@ -64,6 +72,7 @@ export const MainContentLayout = ({
             "pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4",
             showContentMenu &&
               "grid grid-cols-1 lg:mx-auto lg:grid-cols-[1fr_221px]",
+            chatOpened && showCollapsedNavbar && "pl-docs_1",
             contentClassName
           )}
           id="content"