Hide scrollbar on sections (#3367)

.changeset/brown-ducks-think.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Hide scrollbar on sections

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -680,9 +680,7 @@ body:has(.openapi-select-popover) {
 /* Tabs */
 .openapi-panel-header,
 .openapi-tabs-list {
-    @apply flex flex-row gap-1.5 py-1.5 px-2.5 w-full overflow-x-scroll;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    @apply flex flex-row gap-1.5 py-1.5 px-2.5 w-full overflow-x-auto no-scrollbar;
 }
 
 .openapi-tabs-tab {

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

@@ -183,8 +183,8 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                     <div
                         className={tcls(
                             'w-full',
-                            'overflow-x-scroll',
-                            'overflow-y-hidden',
+                            'overflow-x-auto',
+                            'no-scrollbar',
                             '-mb-4 pb-4', // Positive padding / negative margin allows the navigation menu indicator to show in a scroll viewƒ
                             !sections ? ['hidden', 'page-no-toc:flex'] : 'flex'
                         )}

packages/gitbook/tailwind.config.ts

@@ -456,6 +456,17 @@ const config: Config = {
         },
     },
     plugins: [
+        plugin(({ addUtilities }) => {
+            addUtilities({
+                '.no-scrollbar': {
+                    'scrollbar-width': 'none',
+                    '-ms-overflow-style': 'none',
+                    '&::-webkit-scrollbar': {
+                        display: 'none',
+                    },
+                },
+            });
+        }),
         plugin(({ addVariant }) => {
             /**
              * Variant when the Table of Content navigation is open.