Fix OpenAPI path display (#3743)

nolannbiron · web-flow · commit c32d4494f2ba · 2025-10-19T21:44:26.000+02:00
diff --git a/.changeset/solid-things-own.md b/.changeset/solid-things-own.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix OpenAPI path display
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -454,6 +454,10 @@
     @apply flex items-center font-mono text-[0.813rem] gap-1 h-fit *:truncate overflow-x-auto min-w-0 max-w-full font-normal text-tint-strong;
 }
 
+.openapi-codesample-header-content .openapi-path-title {
+    @apply block;
+}
+
 .openapi-codesample-header-content .openapi-path .openapi-path-variable {
     @apply text-[0.813rem];
 }
@@ -486,7 +490,7 @@
 }
 
 .openapi-path-title {
-    @apply flex-1 relative font-normal text-left overflow-x-auto font-mono text-tint-strong/10;
+    @apply flex-1 relative font-normal items-center gap-y-1 flex flex-wrap text-left overflow-x-auto font-mono text-tint-strong/10;
     @apply whitespace-nowrap md:whitespace-normal;
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -606,7 +610,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-select-unstyled > button {
-    @apply p-1;
+    @apply p-1 *:truncate max-w-full;
 }
 
 .openapi-select > button[data-focused="true"] {
@@ -998,7 +1002,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-path-copy-button-icon {
-    @apply size-6 flex opacity-0 transition-all;
+    @apply size-6 opacity-0 transition-all hidden sm:flex;
 }
 
 .openapi-path:hover .openapi-path-copy-button-icon {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'gitbook': patch
 +---
++
 +Fix OpenAPI path display
Original file line number	Diff line number	Diff line change
`@@ -454,6 +454,10 @@`
`454`	`454`	`@apply flex items-center font-mono text-[0.813rem] gap-1 h-fit *:truncate overflow-x-auto min-w-0 max-w-full font-normal text-tint-strong;`
`455`	`455`	`}`
`456`	`456`
	`457`	`+.openapi-codesample-header-content .openapi-path-title {`
	`458`	`+ @apply block;`
	`459`	`+}`
	`460`	`+`
`457`	`461`	`.openapi-codesample-header-content .openapi-path .openapi-path-variable {`
`458`	`462`	`@apply text-[0.813rem];`
`459`	`463`	`}`
`@@ -486,7 +490,7 @@`
`486`	`490`	`}`
`487`	`491`
`488`	`492`	`.openapi-path-title {`
`489`		`- @apply flex-1 relative font-normal text-left overflow-x-auto font-mono text-tint-strong/10;`
	`493`	`+ @apply flex-1 relative font-normal items-center gap-y-1 flex flex-wrap text-left overflow-x-auto font-mono text-tint-strong/10;`
`490`	`494`	`@apply whitespace-nowrap md:whitespace-normal;`
`491`	`495`	`scrollbar-width: none;`
`492`	`496`	`-ms-overflow-style: none;`
`@@ -606,7 +610,7 @@ body:has(.openapi-select-popover) {`
`606`	`610`	`}`
`607`	`611`
`608`	`612`	`.openapi-select-unstyled > button {`
`609`		`- @apply p-1;`
	`613`	`+ @apply p-1 *:truncate max-w-full;`
`610`	`614`	`}`
`611`	`615`
`612`	`616`	`.openapi-select > button[data-focused="true"] {`
`@@ -998,7 +1002,7 @@ body:has(.openapi-select-popover) {`
`998`	`1002`	`}`
`999`	`1003`
`1000`	`1004`	`.openapi-path-copy-button-icon {`
`1001`		`- @apply size-6 flex opacity-0 transition-all;`
	`1005`	`+ @apply size-6 opacity-0 transition-all hidden sm:flex;`
`1002`	`1006`	`}`
`1003`	`1007`
`1004`	`1008`	`.openapi-path:hover .openapi-path-copy-button-icon {`