diff --git a/.changeset/rare-timers-clap.md b/.changeset/rare-timers-clap.md new file mode 100644 index 000000000..6b67dacc8 --- /dev/null +++ b/.changeset/rare-timers-clap.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Fix long tab group description diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index fdbb38c04..16173e33c 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/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 */ diff --git a/packages/react-openapi/src/OpenAPIResponses.tsx b/packages/react-openapi/src/OpenAPIResponses.tsx index e145a8ae4..a52a938d1 100644 --- a/packages/react-openapi/src/OpenAPIResponses.tsx +++ b/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} {description ? ( - +
+ {htmlToText(description)} +
) : null} ), @@ -66,3 +64,8 @@ export function OpenAPIResponses(props: { ); } + +function htmlToText(html: string): string { + const doc = new DOMParser().parseFromString(html, 'text/html'); + return doc.body.textContent?.trim() || ''; +}