From 15bb9114f76305525b5ab9b7f2d75652639f4830 Mon Sep 17 00:00:00 2001 From: Steven Hall Date: Mon, 4 Nov 2024 12:57:02 +0000 Subject: [PATCH 1/6] Fix the styling of site section tabs on smaller screens. --- .../gitbook/src/components/Header/Header.tsx | 10 ++--- .../SiteSectionTabs/SiteSectionTabs.tsx | 40 +++++++++---------- packages/gitbook/src/components/layout.ts | 15 +++++-- 3 files changed, 35 insertions(+), 30 deletions(-) diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 41dcc0b9dd..4c8a8a1e33 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/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: {
-
- -
+
) : null} diff --git a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx index fe56a26844..4284c545b2 100644 --- a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx +++ b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx @@ -1,11 +1,11 @@ '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 { getContainerHorizontalPaddingStyle } from '../layout'; +import { Link } from '../primitives'; /** * A set of navigational tabs representing site sections for multi-section sites @@ -35,7 +35,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 +60,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 ? ( ) : null; } +/** + * Horizontal padding for the tabs. Gives a nice hover effect and is used to calculate the padding of the container. + */ +const TAB_HORIZONTAL_PADDING = 3; + /** * The tab item - a link to a site section */ @@ -121,7 +131,8 @@ const Tab = React.forwardRef - - - ); -} diff --git a/packages/gitbook/src/components/layout.ts b/packages/gitbook/src/components/layout.ts index a4aa82a3ab..545aca9535 100644 --- a/packages/gitbook/src/components/layout.ts +++ b/packages/gitbook/src/components/layout.ts @@ -5,13 +5,22 @@ import { ClassValue } from '@/lib/tailwind'; */ export const HEADER_HEIGHT_DESKTOP = 64 as const; +export function getContainerHorizontalPaddingStyle(offset: number = 0): ClassValue { + return [ + // px-4 + `px-${4 - offset}`, + // sm:px-6 + `sm:px-${6 - offset}`, + // md:px-8 + `md:px-${8 - offset}`, + ]; +} + /** * Style for the container to adapt between normal and full width. */ export const CONTAINER_STYLE: ClassValue = [ - 'px-4', - 'sm:px-6', - 'md:px-8', + getContainerHorizontalPaddingStyle(), 'max-w-screen-2xl', 'mx-auto', 'page-full-width:max-w-full', From 0b34a7b28cd8d452a9bc14f1ed211f01a2959485 Mon Sep 17 00:00:00 2001 From: Steven Hall Date: Mon, 4 Nov 2024 12:57:50 +0000 Subject: [PATCH 2/6] Changeset --- .changeset/weak-swans-battle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-swans-battle.md diff --git a/.changeset/weak-swans-battle.md b/.changeset/weak-swans-battle.md new file mode 100644 index 0000000000..b378142000 --- /dev/null +++ b/.changeset/weak-swans-battle.md @@ -0,0 +1,5 @@ +--- +'gitbook': minor +--- + +Fix the styling of site section tabs on smaller screens. From d016503019545805d5bdbb1fece1fcc134947131 Mon Sep 17 00:00:00 2001 From: Steven Hall Date: Mon, 4 Nov 2024 12:58:26 +0000 Subject: [PATCH 3/6] Add comment --- packages/gitbook/src/components/layout.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/gitbook/src/components/layout.ts b/packages/gitbook/src/components/layout.ts index 545aca9535..1aced1b08f 100644 --- a/packages/gitbook/src/components/layout.ts +++ b/packages/gitbook/src/components/layout.ts @@ -5,6 +5,10 @@ import { ClassValue } from '@/lib/tailwind'; */ export const HEADER_HEIGHT_DESKTOP = 64 as const; +/** + * Returns horizontal padding classes for the application. Optionally provide + * an offset to adjust the padding. + */ export function getContainerHorizontalPaddingStyle(offset: number = 0): ClassValue { return [ // px-4 From c787fdbc5292ebb7e810db240c308a569e47c03e Mon Sep 17 00:00:00 2001 From: Steven Hall Date: Mon, 4 Nov 2024 13:03:51 +0000 Subject: [PATCH 4/6] Add missing flex --- .../gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx index 4284c545b2..1924148c18 100644 --- a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx +++ b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx @@ -64,7 +64,7 @@ export function SiteSectionTabs(props: {