Fix the styling of site section tabs on smaller screens. (#2565)

Author: emmerich

.changeset/weak-swans-battle.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix the styling of site section tabs on smaller screens.

packages/gitbook/src/components/Header/Header.tsx

@@ -26,10 +26,8 @@ export function Header(props: {
     context: ContentRefContext;
     customization: CustomizationSettings | SiteCustomizationSettings;
     withTopHeader?: boolean;
-    children?: React.ReactNode;
 }) {
-    const { children, context, space, site, spaces, sections, customization, withTopHeader } =
-        props;
+    const { context, space, site, spaces, sections, customization, withTopHeader } = props;
     const isCustomizationDefault =
         customization.header.preset === CustomizationHeaderPreset.Default;
     const hasSiteSections = sections && sections.list.length > 1;
@@ -145,11 +143,11 @@ export function Header(props: {
                 <div
                     className={tcls(
                         'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark z-[9] mt-0.5',
+                        // Handle long section tabs, particularly on smaller screens.
+                        'overflow-x-auto hide-scroll',
                     )}
                 >
-                    <div className={tcls(CONTAINER_STYLE)}>
-                        <SiteSectionTabs {...sections} />
-                    </div>
+                    <SiteSectionTabs {...sections} />
                 </div>
             ) : null}
         </header>

packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx

@@ -1,11 +1,10 @@
 'use client';
 import { SiteSection } from '@gitbook/api';
-import { Icon } from '@gitbook/icons';
 import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
 
-import { Button, Link } from '../primitives';
+import { Link } from '../primitives';
 
 /**
  * A set of navigational tabs representing site sections for multi-section sites
@@ -35,7 +34,11 @@ export function SiteSectionTabs(props: {
         if (currentTabRef.current && navRef.current) {
             const rect = currentTabRef.current.getBoundingClientRect();
             const navRect = navRef.current.getBoundingClientRect();
-            setTabDimensions({ left: rect.left - navRect.left, width: rect.width });
+
+            setTabDimensions({
+                left: rect.left - navRect.left,
+                width: rect.width,
+            });
         }
     }, []);
 
@@ -56,13 +59,11 @@ export function SiteSectionTabs(props: {
     const scale = (tabDimensions?.width ?? 0) * 0.01;
     const startPos = `${tabDimensions?.left ?? 0}px`;
 
-    const hasMoreSections = false; /** TODO: determine whether we need to show the more button */
-
     return tabs.length > 0 ? (
         <nav
             aria-label="Sections"
             ref={navRef}
-            className="flex flex-nowrap items-center max-w-screen mb-px"
+            className="flex flex-nowrap items-center mb-px"
             style={
                 {
                     '--tab-opacity': `${opacity}`,
@@ -77,6 +78,12 @@ export function SiteSectionTabs(props: {
                     'flex',
                     'gap-2',
                     'bg-transparent',
+
+                    // Horizontal padding, which is the layout padding minus the padding of the tabs themselves.
+                    'px-1',
+                    'sm:px-3',
+                    'md:px-5',
+
                     /* add a pseudo element for active tab indicator */
                     'after:block',
                     "after:content-['']",
@@ -107,7 +114,6 @@ export function SiteSectionTabs(props: {
                     />
                 ))}
             </div>
-            {hasMoreSections ? <MoreSectionsButton /> : null}
         </nav>
     ) : null;
 }
@@ -136,16 +142,3 @@ const Tab = React.forwardRef<HTMLSpanElement, { active: boolean; href: string; l
         );
     },
 );
-
-/**
- * Dropdown trigger for when there are too many sections to show them all
- */
-function MoreSectionsButton() {
-    return (
-        <div>
-            <Button variant="secondary" size="small">
-                <Icon icon="ellipsis-h" size={12} />
-            </Button>
-        </div>
-    );
-}