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",
+          "bg-docs-bg font-base text-medium w-full",
-          "text-medusa-fg-subtle"
+          "text-medusa-fg-subtle",
+          "h-screen overflow-hidden"
         )}
       >
         <Providers>
-          <div className="w-full">
           <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 />
+          <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>

www/ignore-build-script.sh

@@ -3,7 +3,10 @@
 echo "VERCEL_ENV: $VERCEL_ENV"
 echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
 
-$(git diff HEAD^ HEAD --quiet .)
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+echo "SCRIPT_DIR: $SCRIPT_DIR"
+
+$(git diff HEAD^ HEAD --quiet ${SCRIPT_DIR})
 diffResult=$?
 
 echo "DIFF RESULT: $diffResult"

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",
+        "h-navbar w-full justify-between",
-        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base z-[400] border-b",
+        "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",
+        "fixed -left-full top-0 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",
+        "lg:w-sidebar w-full",
-        mobileSidebarOpen && "!left-0",
+        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"