Make OpenAPI tabs list scrollable if overflowing (#2848)

nolannbiron · web-flow · commit aa6be381a446 · 2025-02-19T11:10:11.000+01:00
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -463,7 +463,7 @@
 }
 
 .openapi-section-header-content {
-    @apply flex-1 text-base gap-1.5 flex w-full font-medium text-tint-strong;
+    @apply flex-1 overflow-hidden text-base gap-1.5 flex w-full font-medium text-tint-strong;
 }
 
 .openapi-section-header-controls {
@@ -500,11 +500,13 @@
 
 /* Tabs */
 .openapi-tabs-list {
-    @apply flex flex-row gap-3 py-1.5 px-2.5 border-b border-tint-subtle w-full;
+    @apply flex flex-row gap-1.5 py-1.5 px-2.5 border-b border-tint-subtle w-full overflow-x-scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
 .openapi-tabs-tab {
-    @apply hover:bg-primary-hover font-mono font-normal tabular-nums hover:text-primary cursor-pointer transition-all relative text-[0.813rem] text-tint px-1 border border-transparent rounded;
+    @apply hover:bg-primary-hover whitespace-nowrap font-mono font-normal tabular-nums hover:text-primary cursor-pointer transition-all relative text-[0.813rem] text-tint px-1 border border-transparent rounded;
 }
 
 .openapi-tabs-tab[aria-selected='true'] {

Original file line number	Diff line number	Diff line change
`@@ -463,7 +463,7 @@`
`463`	`463`	`}`
`464`	`464`
`465`	`465`	`.openapi-section-header-content {`
`466`		`- @apply flex-1 text-base gap-1.5 flex w-full font-medium text-tint-strong;`
	`466`	`+ @apply flex-1 overflow-hidden text-base gap-1.5 flex w-full font-medium text-tint-strong;`
`467`	`467`	`}`
`468`	`468`
`469`	`469`	`.openapi-section-header-controls {`
`@@ -500,11 +500,13 @@`
`500`	`500`
`501`	`501`	`/* Tabs */`
`502`	`502`	`.openapi-tabs-list {`
`503`		`- @apply flex flex-row gap-3 py-1.5 px-2.5 border-b border-tint-subtle w-full;`
	`503`	`+ @apply flex flex-row gap-1.5 py-1.5 px-2.5 border-b border-tint-subtle w-full overflow-x-scroll;`
	`504`	`+ scrollbar-width: none;`
	`505`	`+ -ms-overflow-style: none;`
`504`	`506`	`}`
`505`	`507`
`506`	`508`	`.openapi-tabs-tab {`
`507`		`- @apply hover:bg-primary-hover font-mono font-normal tabular-nums hover:text-primary cursor-pointer transition-all relative text-[0.813rem] text-tint px-1 border border-transparent rounded;`
	`509`	`+ @apply hover:bg-primary-hover whitespace-nowrap font-mono font-normal tabular-nums hover:text-primary cursor-pointer transition-all relative text-[0.813rem] text-tint px-1 border border-transparent rounded;`
`508`	`510`	`}`
`509`	`511`
`510`	`512`	`.openapi-tabs-tab[aria-selected='true'] {`