Fix OpenAPI long tab group description (#2838)

Author: nolannbiron

.changeset/rare-timers-clap.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix long tab group description

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

@@ -338,7 +338,7 @@
 }
 
 .openapi-response-description.openapi-markdown {
-    @apply prose-sm text-[0.813rem] h-auto relative leading-[1.125rem] text-tint !font-normal truncate select-text prose-strong:font-semibold prose-strong:text-inherit;
+    @apply text-left prose-sm text-[0.813rem] h-auto relative leading-[1.125rem] text-tint !font-normal truncate select-text prose-strong:font-semibold prose-strong:text-inherit;
 }
 
 .openapi-response-description.openapi-markdown::-webkit-scrollbar {
@@ -525,11 +525,11 @@
 }
 
 .openapi-disclosure-group-header {
-    @apply flex flex-row items-center justify-between gap-3;
+    @apply flex flex-row items-baseline justify-between gap-3 relative;
 }
 
 .openapi-disclosure-group-trigger {
-    @apply flex items-center relative flex-1 gap-2.5 py-2 truncate -outline-offset-1;
+    @apply flex items-baseline relative flex-1 gap-2.5 py-2 truncate -outline-offset-1;
 }
 
 .openapi-disclosure-group-trigger:disabled {
@@ -545,6 +545,10 @@
     @apply invisible;
 }
 
+.openapi-disclosure-group-trigger[aria-expanded='true'] .openapi-response-description {
+    @apply whitespace-normal;
+}
+
 .openapi-disclosure-group-icon > svg {
     @apply size-3 text-tint-subtle transition-all duration-300;
 }
@@ -561,17 +565,16 @@
     @apply rotate-90;
 }
 
-.openapi-disclosure-group:hover .openapi-disclosure-group-mediatype,
-.openapi-disclosure-group[aria-expanded='true'] .openapi-disclosure-group-mediatype {
+.openapi-disclosure-group:hover .openapi-disclosure-group-mediatype {
     @apply opacity-11 flex;
 }
 
 .openapi-disclosure-group-mediatype {
-    @apply opacity-0 hidden transition-all duration-200 shrink-0;
+    @apply opacity-0 hidden text-xs transition-all duration-200 shrink-0 absolute right-0 top-2.5;
 }
 
 .openapi-disclosure-group-mediatype > span {
-    @apply text-xs text-tint-subtle;
+    @apply px-1 bg-tint-6 text-tint-12 rounded-full;
 }
 
 /* Disclosure */

packages/react-openapi/src/OpenAPIResponses.tsx

@@ -4,7 +4,6 @@ import { OpenAPIResponse } from './OpenAPIResponse';
 import { OpenAPIClientContext } from './types';
 import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
-import { Markdown } from './Markdown';
 
 /**
  * Display an interactive response body.
@@ -40,10 +39,9 @@ export function OpenAPIResponses(props: {
                                         {statusCode}
                                     </span>
                                     {description ? (
-                                        <Markdown
-                                            source={description}
-                                            className="openapi-response-description"
-                                        />
+                                        <div className="openapi-markdown openapi-response-description">
+                                            {htmlToText(description)}
+                                        </div>
                                     ) : null}
                                 </div>
                             ),
@@ -66,3 +64,8 @@ export function OpenAPIResponses(props: {
         </InteractiveSection>
     );
 }
+
+function htmlToText(html: string): string {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent?.trim() || '';
+}