From a65654edfbb8cf8847e4c2f162f8109bb91022af Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <admin@zeno.zone>
Date: Wed, 22 Jan 2025 14:41:45 +0100
Subject: [PATCH] Balance links with search bar and variant dropdown

---
 .../gitbook/src/components/Header/Header.tsx  | 55 ++++++++++---------
 .../src/components/Header/HeaderLinks.tsx     |  2 +-
 .../src/components/Header/HeaderLogo.tsx      |  2 +-
 .../src/components/Header/SpacesDropdown.tsx  |  2 +-
 .../components/Header/headerLinks.module.css  | 22 ++++----
 5 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 9ee35ba0b6..b7ce6dbc9e 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -98,6 +98,7 @@ export function Header(props: {
                                     MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR
                                     ? 'lg:basis-72'
                                     : '',
+                                isMultiVariants && 'page-no-toc:lg:basis-auto',
                             )}
                         >
                             <HeaderMobileMenu
@@ -113,11 +114,37 @@ export function Header(props: {
                             <HeaderLogo site={site} space={space} customization={customization} />
                         </div>
 
+                        {isMultiVariants && (
+                            <div className="hidden page-no-toc:flex mr-auto">
+                                <SpacesDropdown
+                                    space={space}
+                                    spaces={spaces}
+                                    className={
+                                        !isCustomizationDefault
+                                            ? `bg-header-link/2 text-header-link ring-header-link/4 
+                                            dark:bg-header-link/2 dark:text-header-link dark:ring-header-link/4 
+                                            group-hover/dropdown:bg-header-link/3 group-hover/dropdown:text-header-link group-hover/dropdown:ring-header-link/6
+                                            dark:group-hover/dropdown:bg-header-link/3 dark:group-hover/dropdown:text-header-link dark:group-hover/dropdown:ring-header-link/6
+                                            group-focus-within/dropdown:bg-header-link/3 group-focus-within/dropdown:text-header-link group-focus-within/dropdown:ring-header-link/6
+                                            dark:group-focus-within/dropdown:bg-header-link/3 dark:group-focus-within/dropdown:text-header-link dark:group-focus-within/dropdown:ring-header-link/6
+                                            
+                                            contrast-more:bg-header-background contrast-more:text-header-link contrast-more:ring-header-link
+                                            contrast-more:group-hover/dropdown:text-header-link contrast-more:group-hover/dropdown:ring-header-link
+                                            contrast-more:dark:group-hover/dropdown:text-header-link contrast-more:dark:group-hover/dropdown:ring-header-link
+                                            contrast-more:group-focus-within/dropdown:text-header-link contrast-more:group-focus-within/dropdown:ring-header-link
+                                            contrast-more:dark:group-focus-within/dropdown:text-header-link contrast-more:dark:group-focus-within/dropdown:ring-header-link`
+                                            : ''
+                                    }
+                                />
+                            </div>
+                        )}
+
                         <div
                             className={tcls(
                                 'flex',
                                 'gap-4',
                                 'md:min-w-56',
+                                'items-center',
                                 'grow-0 shrink-0',
                                 customization.header.links.length <=
                                     MAX_HEADER_LINKS_FOR_BIG_SEARCHBAR
@@ -128,38 +155,14 @@ export function Header(props: {
                                           'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]',
                                           'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]',
                                           'lg:mr-auto',
-                                          'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),1.5rem)]',
+                                          'page-no-toc:xl:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),1.5rem)]',
+                                          isMultiVariants && 'page-no-toc:lg:ml-0 page-no-toc:xl:ml-0',
                                           'order-last',
                                           'lg:order-[unset]',
                                       ]
                                     : ['order-last'],
                             )}
                         >
-                            {isMultiVariants && (
-                                <div className="hidden page-no-toc:flex mr-auto">
-                                    <SpacesDropdown
-                                        space={space}
-                                        spaces={spaces}
-                                        className={
-                                            !isCustomizationDefault
-                                                ? `bg-header-link/2 text-header-link ring-header-link/4 
-                                            dark:bg-header-link/2 dark:text-header-link dark:ring-header-link/4 
-                                            group-hover/dropdown:bg-header-link/3 group-hover/dropdown:text-header-link group-hover/dropdown:ring-header-link/6
-                                            dark:group-hover/dropdown:bg-header-link/3 dark:group-hover/dropdown:text-header-link dark:group-hover/dropdown:ring-header-link/6
-                                            group-focus-within/dropdown:bg-header-link/3 group-focus-within/dropdown:text-header-link group-focus-within/dropdown:ring-header-link/6
-                                            dark:group-focus-within/dropdown:bg-header-link/3 dark:group-focus-within/dropdown:text-header-link dark:group-focus-within/dropdown:ring-header-link/6
-                                            
-                                            contrast-more:bg-header-background contrast-more:text-header-link contrast-more:ring-header-link
-                                            contrast-more:group-hover/dropdown:text-header-link contrast-more:group-hover/dropdown:ring-header-link
-                                            contrast-more:dark:group-hover/dropdown:text-header-link contrast-more:dark:group-hover/dropdown:ring-header-link
-                                            contrast-more:group-focus-within/dropdown:text-header-link contrast-more:group-focus-within/dropdown:ring-header-link
-                                            contrast-more:dark:group-focus-within/dropdown:text-header-link contrast-more:dark:group-focus-within/dropdown:ring-header-link`
-                                                : ''
-                                        }
-                                    />
-                                </div>
-                            )}
-
                             <Suspense fallback={null}>
                                 <SearchButton
                                     style={
diff --git a/packages/gitbook/src/components/Header/HeaderLinks.tsx b/packages/gitbook/src/components/Header/HeaderLinks.tsx
index 6698f369ff..340a513d0a 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,
-                'grow shrink flex justify-end items-center gap-x-4 lg:gap-x-6 min-w-9 z-20 lg:[&>.button+.button]:-ml-2',
+                'grow-[2.5] shrink flex justify-end items-center gap-x-4 lg:gap-x-6 min-w-9 z-20 lg:[&>.button+.button]:-ml-2',
             )}
         >
             {children}
diff --git a/packages/gitbook/src/components/Header/HeaderLogo.tsx b/packages/gitbook/src/components/Header/HeaderLogo.tsx
index 18c1201eef..65addec76e 100644
--- a/packages/gitbook/src/components/Header/HeaderLogo.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLogo.tsx
@@ -95,7 +95,7 @@ function LogoFallback(props: HeaderLogoProps) {
             <div
                 className={tcls(
                     'text-pretty',
-                    'line-clamp-3',
+                    'line-clamp-2',
                     'tracking-tight',
                     'max-w-[18ch]',
                     'lg:max-w-[24ch]',
diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
index 1ba930a2a8..40628d6293 100644
--- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx
+++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
@@ -69,7 +69,7 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
                         className,
                     )}
                 >
-                    <span className={tcls('line-clamp-2', 'grow')}>{space.title}</span>
+                    <span className={tcls('line-clamp-1', 'grow')}>{space.title}</span>
                     <DropdownChevron />
                 </div>
             )}
diff --git a/packages/gitbook/src/components/Header/headerLinks.module.css b/packages/gitbook/src/components/Header/headerLinks.module.css
index 38a5ec0f77..50e9fc76cc 100644
--- a/packages/gitbook/src/components/Header/headerLinks.module.css
+++ b/packages/gitbook/src/components/Header/headerLinks.module.css
@@ -7,11 +7,13 @@
     }
 }
 
-@media(max-width:1023px) {
-    .containerHeaderlinks {
-        container-type: inline-size;
-        container-name: headerlinks;
-    }
+.containerHeaderlinks {
+    container-type: inline-size;
+    container-name: headerlinks;
+}
+
+/* @media(max-width:1279px) {
+    
 }
 
 @media(max-width:1279px) {
@@ -36,7 +38,7 @@
             display: flex;
         }
     }
-}
+} */
 
 /* @media (max-width: 1024px) {
     .containerHeaderlinks > :nth-child(n + 4) {
@@ -96,7 +98,7 @@
         }
     }
 }
-@container headerlinks ( width < 400px ) {
+@container headerlinks ( width < 450px ) {
     .containerHeaderlinks > :nth-child(n + 3) {
         display: none;
     }
@@ -107,7 +109,7 @@
         }
     }
 }
-@container headerlinks ( width < 500px ) {
+@container headerlinks ( width < 550px ) {
     .containerHeaderlinks > :nth-child(n + 4) {
         display: none;
     }
@@ -118,7 +120,7 @@
         }
     }
 }
-@container headerlinks ( width < 600px ) {
+@container headerlinks ( width < 650px ) {
     .containerHeaderlinks > :nth-child(n + 5) {
         display: none;
     }
@@ -129,7 +131,7 @@
         }
     }
 }
-@container headerlinks ( width < 700px ) {
+@container headerlinks ( width < 750px ) {
     .containerHeaderlinks > :nth-child(n + 6) {
         display: none;
     }