Fix an issue where the active site section indicator appeared above any dropdowns. (#2568)

Author: emmerich

.changeset/large-hornets-exist.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix an issue where the active site section indicator appeared above any dropdowns.

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',

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 (

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) => (

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}