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>
- );
-}