Fix OpenAPI enum display (#3077)

.changeset/spotty-brooms-itch.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix OpenAPI enum display

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 {

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>
     );
 }