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

* docs: fix z-index across projects

* remove usage of z-index in UI docs

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -97,7 +97,7 @@ export const CodeBlock = ({
             </pre>
             <div
               className={clsx(
-                "absolute z-50 hidden gap-docs_1 md:flex",
+                "absolute z-[1] hidden gap-docs_1 md:flex",
                 tokens.length === 1 && "right-docs_0.75 top-[10px]",
                 tokens.length > 1 && "right-docs_1 top-docs_1"
               )}

www/packages/docs-ui/src/components/Details/index.tsx

@@ -49,7 +49,7 @@ export const Details = ({
       }}
       className={clsx(
         "border-medusa-border-base border-y border-solid border-x-0",
-        "overflow-hidden [&>summary]:relative [&>summary]:z-[398]",
+        "overflow-hidden [&>summary]:relative",
         props.className
       )}
     >

www/packages/docs-ui/src/components/Modal/index.tsx

@@ -87,7 +87,7 @@ export const Modal = ({
       {...props}
       className={clsx(
         "fixed top-0 left-0 flex h-screen w-screen items-center justify-center",
-        "bg-medusa-bg-overlay z-[500]",
+        "bg-medusa-bg-overlay",
         "hidden open:flex border-0 p-0",
         className
       )}

www/packages/docs-ui/src/components/Navbar/index.tsx

@@ -31,14 +31,14 @@ export const Navbar = ({
   return (
     <nav
       className={clsx(
-        "h-navbar sticky top-0 w-full justify-between",
-        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base z-[400] border-b",
+        "h-navbar w-full justify-between",
+        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base border-b",
         className
       )}
     >
       <div
         className={clsx(
-          "h-navbar max-w-xxl py-docs_0.75 sticky top-0 mx-auto flex w-full justify-between px-docs_1 lg:px-docs_3"
+          "h-navbar max-w-xxl py-docs_0.75 mx-auto flex w-full justify-between px-docs_1 lg:px-docs_3"
         )}
       >
         <div className="hidden w-full items-center gap-docs_0.5 lg:flex lg:w-auto lg:gap-docs_1.5">

www/packages/docs-ui/src/components/Notification/Item/index.tsx

@@ -38,7 +38,7 @@ export const NotificationItem = ({
       className={clsx(
         "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base rounded-docs_DEFAULT",
         "shadow-flyout dark:shadow-flyout-dark max-h-[calc(100vh-90px)]",
-        "fixed md:right-docs_1 left-0 z-[400] md:m-docs_1",
+        "fixed md:right-docs_1 left-0 md:m-docs_1",
         placement === "bottom" && "md:bottom-docs_1 bottom-0",
         placement === "top" && "md:top-docs_1 top-0",
         "opacity-100 transition-opacity duration-200 ease-ease",

www/packages/docs-ui/src/components/Notification/index.tsx

@@ -52,11 +52,11 @@ export const NotificationContainer = () => {
     <>
       {renderFilteredNotifications(
         (notification) => notification.placement === "top",
-        "flex fixed flex-col gap-docs_0.5 right-0 top-0 z-[400] md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
+        "flex fixed flex-col gap-docs_0.5 right-0 top-0 md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
       )}
       {renderFilteredNotifications(
         (notification) => notification.placement !== "top",
-        "flex flex-col gap-docs_0.5 fixed right-0 bottom-0 z-[400] md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
+        "flex flex-col gap-docs_0.5 fixed right-0 bottom-0 md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
       )}
     </>
   )

www/packages/docs-ui/src/components/Search/Modal/index.tsx

@@ -19,6 +19,7 @@ export type SearchModalProps = {
   suggestions: SearchSuggestionType[]
   checkInternalPattern?: RegExp
   filterOptions?: OptionType[]
+  className?: string
 }
 
 export const SearchModal = ({
@@ -27,6 +28,7 @@ export const SearchModal = ({
   isLoading = false,
   checkInternalPattern,
   filterOptions = [],
+  className,
 }: SearchModalProps) => {
   const modalRef = useRef<HTMLDialogElement | null>(null)
   const { isOpen, setIsOpen, defaultFilters, searchClient } = useSearch()
@@ -194,6 +196,7 @@ export const SearchModal = ({
       open={isOpen}
       onClose={() => setIsOpen(false)}
       passedRef={modalRef}
+      className={className}
     >
       <InstantSearch
         indexName={algolia.mainIndexName}

www/packages/docs-ui/src/components/Select/Dropdown/index.tsx

@@ -115,7 +115,7 @@ export const SelectDropdown = ({
     <div
       className={clsx(
         "absolute top-full left-0 w-full",
-        "z-10 h-0 translate-y-0 overflow-hidden transition-transform",
+        "h-0 translate-y-0 overflow-hidden transition-transform",
         open && "h-auto translate-y-docs_0.5 !overflow-visible",
         className
       )}

www/packages/docs-ui/src/components/Sidebar/index.tsx

@@ -22,9 +22,9 @@ export const Sidebar = ({
       className={clsx(
         "clip bg-docs-bg dark:bg-docs-bg-dark w-ref-sidebar block",
         "border-medusa-border-base border-0 border-r border-solid",
-        "fixed -left-full top-[57px] h-screen transition-[left] lg:relative lg:left-0 lg:top-auto lg:h-auto",
-        "lg:w-sidebar z-[100] w-full lg:z-0",
-        mobileSidebarOpen && "!left-0",
+        "fixed -left-full top-0 h-screen transition-[left] lg:relative lg:left-0 lg:top-auto lg:h-auto",
+        "lg:w-sidebar w-full",
+        mobileSidebarOpen && "!left-0 z-50 top-[57px]",
         !desktopSidebarOpen && "!absolute !-left-full",
         className
       )}
@@ -34,7 +34,7 @@ export const Sidebar = ({
     >
       <ul
         className={clsx(
-          "sticky top-[57px] h-screen max-h-screen w-full list-none overflow-auto p-0",
+          "sticky top-0 h-screen max-h-screen w-full list-none overflow-auto p-0",
           "px-docs_1.5 pb-[57px] pt-docs_1.5"
         )}
         id="sidebar"