From 139a8050a5096925b27bf01ad962d09a8f5d2fd3 Mon Sep 17 00:00:00 2001
From: "Nolann B." <100787331+nolannbiron@users.noreply.github.com>
Date: Wed, 2 Apr 2025 10:15:19 +0200
Subject: [PATCH] Fix OpenAPI enum display (#3077)

---
 .changeset/spotty-brooms-itch.md              |  6 ++++
 .../components/DocumentView/OpenAPI/style.css |  8 ++---
 packages/react-openapi/src/OpenAPISchema.tsx  | 30 +++++++++----------
 3 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/spotty-brooms-itch.md

diff --git a/.changeset/spotty-brooms-itch.md b/.changeset/spotty-brooms-itch.md
new file mode 100644
index 000000000..b203df1bb
--- /dev/null
+++ b/.changeset/spotty-brooms-itch.md
@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix OpenAPI enum display
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
index c0bf8d13c..4f76998b1 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -265,15 +265,11 @@
 
 /* Schema Enum */
 .openapi-schema-enum {
-    @apply flex flex-row text-sm leading-relaxed gap-2 flex-wrap text-tint;
-}
-
-.openapi-schema-enum-list {
-    @apply flex flex-row gap-1.5 items-center;
+    @apply text-sm leading-relaxed max-w-full text-tint;
 }
 
 .openapi-schema-enum-value {
-    @apply text-sm;
+    @apply text-sm mr-1.5;
 }
 
 .openapi-schema-enum-value:first-child {
diff --git a/packages/react-openapi/src/OpenAPISchema.tsx b/packages/react-openapi/src/OpenAPISchema.tsx
index 3e41f6501..435a2508b 100644
--- a/packages/react-openapi/src/OpenAPISchema.tsx
+++ b/packages/react-openapi/src/OpenAPISchema.tsx
@@ -275,22 +275,20 @@ function OpenAPISchemaEnum(props: {
     }
 
     return (
-        <div className="openapi-schema-enum">
-            <span>Available options:</span>
-            <div className="openapi-schema-enum-list">
-                {enumValues.map((item, index) => (
-                    <span key={index} className="openapi-schema-enum-value">
-                        <OpenAPICopyButton
-                            value={item.value}
-                            label={item.description}
-                            withTooltip={!!item.description}
-                        >
-                            <code>{`${item.value}`}</code>
-                        </OpenAPICopyButton>
-                    </span>
-                ))}
-            </div>
-        </div>
+        <span className="openapi-schema-enum">
+            Available options:{' '}
+            {enumValues.map((item, index) => (
+                <span key={index} className="openapi-schema-enum-value">
+                    <OpenAPICopyButton
+                        value={item.value}
+                        label={item.description}
+                        withTooltip={!!item.description}
+                    >
+                        <code>{`${item.value}`}</code>
+                    </OpenAPICopyButton>
+                </span>
+            ))}
+        </span>
     );
 }