docs: fix z-index across projects (#5234)

* docs: fix z-index across projects

* remove usage of z-index in UI docs

www/apps/api-reference/app/api/[area]/layout.tsx

@@ -33,13 +33,17 @@ export default function RootLayout({
         className={clsx(
           inter.variable,
           robotoMono.variable,
-          "bg-docs-bg font-base text-medium h-full w-full",
-          "text-medusa-fg-subtle"
+          "bg-docs-bg font-base text-medium w-full",
+          "text-medusa-fg-subtle",
+          "h-screen overflow-hidden"
         )}
       >
         <Providers>
-          <div className="w-full">
-            <Navbar />
+          <Navbar />
+          <div
+            className="w-full h-[calc(100%-57px)] overflow-y-scroll"
+            id="main"
+          >
             <div className="max-w-xxl mx-auto flex w-full px-1.5">
               <Sidebar />
               <main className="lg:w-ref-main relative mt-4 w-full flex-1 lg:mt-7">

www/apps/api-reference/components/Tags/Operation/index.tsx

@@ -43,6 +43,7 @@ const TagOperation = ({
   const { ref } = useInView({
     threshold: 0.3,
     rootMargin: `112px 0px 112px 0px`,
+    root: document.getElementById("main") || document.body,
     onChange: (changedInView) => {
       if (changedInView) {
         if (!show) {

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -43,6 +43,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
   const { ref } = useInView({
     threshold: 0.5,
     rootMargin: `112px 0px 112px 0px`,
+    root: document.getElementById("main") || document.body,
     onChange: (inView) => {
       if (inView && !loadPaths) {
         setLoadPaths(true)

www/apps/docs/src/providers/Search/index.tsx

@@ -60,6 +60,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
             ],
           },
         ],
+        className: "z-[500]",
       }}
       initialDefaultFilters={defaultFilters}
     >

www/apps/ui/src/app/layout.tsx

@@ -31,11 +31,11 @@ export default function RootLayout({
     <html lang="en" className="h-full w-full">
       <head />
       <body
-        className={`bg-docs-bg h-screen w-full ${inter.variable} ${robotoMono.variable}`}
+        className={`bg-docs-bg h-screen overflow-hidden w-full ${inter.variable} ${robotoMono.variable}`}
       >
         <Providers>
-          <div className="w-full">
-            <Navbar />
+          <Navbar />
+          <div className="w-full h-[calc(100%-57px)] overflow-y-scroll">
             <div className="max-w-xxl grid w-full grid-cols-1 px-6 lg:mx-auto lg:grid-cols-[280px_1fr]">
               <Sidebar expandItems={true} />
               <div className="relative flex w-full flex-1 items-start justify-center px-4 pb-8 pt-16 md:px-8 lg:px-16 lg:py-[112px]">

www/apps/ui/src/components/navbar.tsx

@@ -18,7 +18,6 @@ const Navbar = () => {
         setMobileSidebarOpen,
         mobileSidebarOpen,
       }}
-      className="!z-[49]"
     />
   )
 }

www/apps/ui/src/examples/focus-modal-demo.tsx

@@ -6,7 +6,7 @@ export default function FocusModalDemo() {
       <FocusModal.Trigger asChild>
         <Button>Edit Variant</Button>
       </FocusModal.Trigger>
-      <FocusModal.Content className="z-[100]">
+      <FocusModal.Content>
         <FocusModal.Header>
           <Button>Save</Button>
         </FocusModal.Header>