Fix overflowing section groups (#3873)

Author: zenoachtig

.changeset/full-coats-shave.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix overflowing section groups

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

@@ -18,7 +18,7 @@ import type {
 } from './encodeClientSiteSections';
 
 const SCREEN_OFFSET = 16; // 1rem
-const MAX_ITEMS_PER_COLUMN = 5; // number of items per column
+const MAX_ITEMS_PER_COLUMN = 8; // number of items per column
 /**
  * A set of navigational links representing site sections for multi-section sites
  */
@@ -223,7 +223,7 @@ function SectionGroupTileList(props: {
             {hasSections && (
                 <ul
                     className={tcls(
-                        'flex grid-flow-row flex-col gap-x-2 gap-y-1 p-2 md:grid',
+                        'flex min-w-48 grid-flow-row flex-col gap-x-2 gap-y-1 self-start p-3 md:grid',
                         hasGroups ? 'bg-tint-base' : ''
                     )}
                     style={{
@@ -244,7 +244,7 @@ function SectionGroupTileList(props: {
             {hasGroups && (
                 <ul
                     className={tcls(
-                        'flex grid-flow-col flex-col items-start gap-x-2 gap-y-4 p-2 md:grid md:gap-y-1',
+                        'flex min-w-48 flex-col items-start justify-start gap-x-8 gap-y-2 p-3 md:flex-row md:gap-y-8',
                         hasSections
                             ? 'border-tint-subtle bg-tint-subtle max-md:border-t md:border-l'
                             : ''
@@ -276,7 +276,7 @@ function SectionGroupTile(props: {
         const { url, icon, title, description } = child;
         const isActive = child.id === currentSection.id;
         return (
-            <li className="group/section-tile flex w-full shrink grow md:w-68">
+            <li className="group/section-tile flex shrink-0 grow md:max-w-68">
                 <Link
                     href={url}
                     className={tcls(
@@ -317,7 +317,7 @@ function SectionGroupTile(props: {
     const { title, icon, children } = child;
 
     return (
-        <li className="flex w-full shrink grow flex-col gap-1">
+        <li className="flex shrink-0 flex-col gap-1">
             <div className="mt-3 mb-2 flex gap-2.5 px-3 font-semibold text-tint-subtle text-xs uppercase tracking-wider">
                 {icon && (
                     <SectionIcon className="mt-0.5" isActive={false} icon={icon as IconName} />
@@ -327,7 +327,7 @@ function SectionGroupTile(props: {
             <ul
                 className="flex grid-flow-row flex-col gap-x-2 gap-y-1 md:grid"
                 style={{
-                    gridTemplateColumns: `repeat(${Math.ceil(children.length / MAX_ITEMS_PER_COLUMN)}, minmax(0, 1fr))`,
+                    gridTemplateColumns: `repeat(${Math.ceil(children.length / MAX_ITEMS_PER_COLUMN)}, minmax(0, auto))`,
                 }}
             >
                 {children.map((nestedChild) => (