From ca134c8a6029e3759d36b7f21a3075230317552a Mon Sep 17 00:00:00 2001
From: Steven H <steven@gitbook.io>
Date: Tue, 19 Nov 2024 14:16:47 +0000
Subject: [PATCH] Fix an issue where the active site section indicator appeared
 above any dropdowns. (#2568)

---
 .changeset/large-hornets-exist.md                         | 5 +++++
 packages/gitbook/src/components/Header/Dropdown.tsx       | 1 -
 packages/gitbook/src/components/Header/Header.tsx         | 4 ++--
 packages/gitbook/src/components/Header/HeaderLinkMore.tsx | 2 +-
 packages/gitbook/src/components/Header/HeaderLinks.tsx    | 2 +-
 5 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/large-hornets-exist.md

diff --git a/.changeset/large-hornets-exist.md b/.changeset/large-hornets-exist.md
new file mode 100644
index 000000000..2ffda899e
--- /dev/null
+++ b/.changeset/large-hornets-exist.md
@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix an issue where the active site section indicator appeared above any dropdowns.
diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
index 597522a49..36e938714 100644
--- a/packages/gitbook/src/components/Header/Dropdown.tsx
+++ b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -44,7 +44,6 @@ export function Dropdown<E extends HTMLElement>(props: {
                     'absolute',
                     'top-full',
                     'left-0',
-                    'z-20',
                     'origin-top-left',
                     'invisible',
                     'transition-opacity',
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index d8664adcf..5a092ff5e 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -72,11 +72,11 @@ export function Header(props: {
                     )}
                 >
                     <HeaderLogo site={site} space={space} customization={customization} />
-                    <span>
+                    <div className="z-20">
                         {!hasSiteSections && isMultiVariants ? (
                             <SpacesDropdown space={space} spaces={spaces} />
                         ) : null}
-                    </span>
+                    </div>
                     <HeaderLinks>
                         {customization.header.links.map((link, index) => {
                             return (
diff --git a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
index cc304539c..9eb98a313 100644
--- a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
@@ -43,7 +43,7 @@ export function HeaderLinkMore(props: {
     );
 
     return (
-        <div className={`${styles.linkEllipsis} items-center`}>
+        <div className={`${styles.linkEllipsis} items-center z-20`}>
             <Dropdown button={renderButton} className="-translate-x-48 md:translate-x-0">
                 <DropdownMenu>
                     {links.map((link, index) => (
diff --git a/packages/gitbook/src/components/Header/HeaderLinks.tsx b/packages/gitbook/src/components/Header/HeaderLinks.tsx
index fc609949b..4522f0782 100644
--- a/packages/gitbook/src/components/Header/HeaderLinks.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLinks.tsx
@@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
         <div
             className={tcls(
                 styles.containerHeaderlinks,
-                'flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56',
+                'flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56 z-20',
             )}
         >
             {children}