greg/rnd 6997 fix long openapi responses label (#3518)

Author: gregberge

biome.json

@@ -21,7 +21,8 @@
             "packages/openapi-parser/src/fixtures/**/*",
             "packages/emoji-codepoints/index.ts",
             "packages/icons/src/data/*.json",
-            "packages/gitbook/worker-configuration.d.ts"
+            "packages/gitbook/worker-configuration.d.ts",
+            "**/*.css"
         ]
     },
     "formatter": {

packages/gitbook/package.json

@@ -100,7 +100,7 @@
         "generate": "gitbook-icons ./public/~gitbook/static/icons custom-icons && gitbook-math ./public/~gitbook/static/math && wrangler types",
         "copy:icons": "gitbook-icons ./public/~gitbook/static/icons",
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math",
-        "dev": "env-cmd --silent -f ../../.env.local next --turbopack",
+        "dev": "env-cmd --silent -f ../../.env.local next",
         "build": "next build",
         "start": "next start",
         "build:cloudflare": "opennextjs-cloudflare build",

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

@@ -379,21 +379,23 @@
 }
 
 .openapi-response-tab-content {
-    @apply flex items-baseline truncate grow shrink max-w-max basis-[60%] mr-auto;
+    @apply flex items-baseline truncate grow shrink max-w-max basis-full mr-auto;
     @apply text-left text-pretty relative leading-tight text-tint select-text;
 }
 
 .openapi-response-description.openapi-markdown {
-    @apply text-left truncate prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-left prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit;
 }
 
-.openapi-disclosure-group-trigger[aria-expanded="true"] .openapi-response-tab-content {
-    @apply basis-full;
-}
-
-.openapi-disclosure-group-trigger[aria-expanded="true"]
+.openapi-disclosure-group-trigger[aria-expanded="false"] {
     .openapi-response-description.openapi-markdown {
-    @apply whitespace-normal;
+        @apply truncate;
+        @apply [&>*:not(:first-child)]:hidden *:truncate *:!p-0 *:!m-0;
+    }
+
+    .openapi-response-tab-content {
+        @apply basis-[60%]
+    }
 }
 
 .openapi-response-body {
@@ -551,6 +553,10 @@
     @apply text-[0.813rem] truncate text-tint font-normal;
 }
 
+.openapi-response-examples-statuscode-label {
+    @apply truncate;
+}
+
 .openapi-response-examples-panel,
 .openapi-codesample-panel {
     @apply flex-1 text-sm relative focus-visible:outline-none;
@@ -583,10 +589,6 @@ body:has(.openapi-select-popover) {
     @apply shrink truncate flex items-center;
 }
 
-.openapi-select > button > span.react-aria-SelectValue span:not(.openapi-statuscode) {
-    @apply truncate;
-}
-
 .openapi-select > button .openapi-markdown {
     @apply *:leading-none;
 }
@@ -615,7 +617,7 @@ body:has(.openapi-select-popover) {
 
 .openapi-select button .openapi-markdown,
 .openapi-select-item .openapi-markdown {
-    @apply text-[0.813rem] *:truncate;
+    @apply text-[0.813rem] *:truncate *:!p-0 *:!m-0 [&>*:not(:first-child)]:hidden;
 }
 
 .openapi-select-item-selected,

packages/gitbook/tailwind.config.ts

@@ -62,9 +62,9 @@ function opacity() {
 const config: Config = {
     darkMode: 'class',
     content: [
-        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx,css}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx,css}',
+        './src/app/**/*.{js,ts,jsx,tsx,mdx,css}',
     ],
     theme: {
         extend: {

packages/react-openapi/src/OpenAPIResponseExample.tsx

@@ -46,7 +46,7 @@ export function OpenAPIResponseExample(props: {
         .map(([key, responseObject]) => {
             const description = resolveDescription(responseObject);
             const label = description ? (
-                <Markdown source={description} />
+                <Markdown key={`response-description-${key}`} source={description} />
             ) : (
                 getStatusCodeDefaultLabel(key, context)
             );

packages/react-openapi/src/OpenAPIResponseExampleContent.tsx

@@ -60,16 +60,7 @@ function OpenAPIResponseExampleHeader(props: {
 
         return (
             <span className="openapi-response-examples-statuscode-title">
-                <span
-                    className={clsx(
-                        'openapi-statuscode',
-                        `openapi-statuscode-${getStatusCodeClassName(item.statusCode)}`,
-                        'openapi-response-examples-statuscode'
-                    )}
-                >
-                    {item.statusCode}
-                </span>
-                <span>{item.label}</span>
+                <OpenAPIResponseExampleItem item={item} />
             </span>
         );
     }
@@ -83,22 +74,33 @@ function OpenAPIResponseExampleHeader(props: {
         >
             {items.map((item) => (
                 <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                    <span
-                        className={clsx(
-                            'openapi-statuscode',
-                            `openapi-statuscode-${getStatusCodeClassName(item.statusCode)}`,
-                            'openapi-response-examples-statuscode'
-                        )}
-                    >
-                        {item.statusCode}
-                    </span>
-                    <span>{item.label}</span>
+                    <OpenAPIResponseExampleItem item={item} />
                 </OpenAPISelectItem>
             ))}
         </OpenAPISelect>
     );
 }
 
+function OpenAPIResponseExampleItem(props: {
+    item: OpenAPIResponseExampleItem;
+}) {
+    const { item } = props;
+    return (
+        <>
+            <span
+                className={clsx(
+                    'openapi-statuscode',
+                    `openapi-statuscode-${getStatusCodeClassName(item.statusCode)}`,
+                    'openapi-response-examples-statuscode'
+                )}
+            >
+                {item.statusCode}
+            </span>
+            <span className="openapi-response-examples-statuscode-label">{item.label}</span>
+        </>
+    );
+}
+
 function OpenAPIResponseExampleBody(props: {
     items: OpenAPIResponseExampleItem[];
     blockKey?: string;

packages/react-openapi/src/OpenAPIResponses.tsx

@@ -9,7 +9,12 @@ import { useResponseExamplesState } from './OpenAPIResponseExampleContent';
 import { StaticSection } from './StaticSection';
 import type { OpenAPIClientContext } from './context';
 import { t } from './translate';
-import { createStateKey, getStatusCodeClassName, getStatusCodeDefaultLabel } from './utils';
+import {
+    createStateKey,
+    getStatusCodeClassName,
+    getStatusCodeDefaultLabel,
+    resolveDescription,
+} from './utils';
 
 /**
  * Display an interactive response body.
@@ -58,7 +63,7 @@ export function OpenAPIResponses(props: {
                 }));
             })();
 
-            const description = response.description;
+            const description = resolveDescription(response);
 
             return {
                 key: statusCode,