Fix "Search bar is broken on site with sections when header is disabled" (#3624)

Author: zenoachtig

.changeset/two-plants-arrive.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix Search bar is broken on site with sections when header is disabled

packages/gitbook/src/components/SiteSections/SiteSectionList.tsx

@@ -38,7 +38,7 @@ export function SiteSectionList(props: { sections: ClientSiteSections; className
             >
                 <TOCScrollContainer
                     style={{ maxHeight: `${MAX_ITEMS * 3 + 2}rem` }}
-                    className="overflow-y-auto px-2 pb-6"
+                    className="overflow-y-auto px-2 pb-4"
                 >
                     {sectionsAndGroups.map((item) => {
                         if (item.object === 'site-section-group') {

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -149,14 +149,16 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                             // displays the search button and/or the space dropdown in the ToC according to the header/variant settings. E.g if there is no header, the search button will be displayed in the ToC.
                             <>
                                 {!withTopHeader && (
-                                    <SearchContainer
-                                        style={CustomizationSearchStyle.Subtle}
-                                        isMultiVariants={siteSpaces.length > 1}
-                                        spaceTitle={siteSpace.title}
-                                        siteSpaceId={siteSpace.id}
-                                        className="max-lg:hidden"
-                                        viewport="desktop"
-                                    />
+                                    <div className="flex gap-2">
+                                        <SearchContainer
+                                            style={CustomizationSearchStyle.Subtle}
+                                            isMultiVariants={siteSpaces.length > 1}
+                                            spaceTitle={siteSpace.title}
+                                            siteSpaceId={siteSpace.id}
+                                            className="max-lg:hidden"
+                                            viewport="desktop"
+                                        />
+                                    </div>
                                 )}
                                 {!withTopHeader && withSections && sections && (
                                     <SiteSectionList

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -96,7 +96,11 @@ export async function TableOfContents(props: {
                         'page-has-toc:[html.sidebar-filled.circular-corners_&]:rounded-3xl'
                     )}
                 >
-                    {innerHeader && <div className="flex px-5 *:my-4">{innerHeader}</div>}
+                    {innerHeader ? (
+                        <div className="my-4 flex flex-col space-y-4 px-5 empty:hidden">
+                            {innerHeader}
+                        </div>
+                    ) : null}
                     <TOCScrollContainer // The scrollview inside the sidebar
                         className={tcls(
                             'flex grow flex-col p-2',