Fix OpenAPI overflow issue (#3015)

Author: gregberge

.changeset/twelve-falcons-exist.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix OpenAPI block overflow issue

packages/gitbook/e2e/internal.spec.ts

@@ -420,7 +420,6 @@ const testCases: TestsCase[] = [
                     await zoomImage.first().click();
                     await expect(page.getByTestId('zoom-image-modal')).toBeVisible();
                 },
-                fullPage: true,
                 screenshot: { threshold: 0.8 },
             },
             {

packages/gitbook/e2e/util.ts

@@ -340,6 +340,11 @@ async function waitForIcons(page: Page) {
                 return false;
             }
 
+            // Ignore icons that are not visible.
+            if (!icon.checkVisibility()) {
+                return true;
+            }
+
             // url("https://ka-p.fontawesome.com/releases/v6.6.0/svgs/light/moon.svg?v=2&token=a463935e93")
             const maskImage = window.getComputedStyle(icon).getPropertyValue('mask-image');
             const urlMatch = maskImage.match(/url\("([^"]+)"\)/);

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx

@@ -20,7 +20,7 @@ import type { AnyOpenAPIOperationsBlock } from '@/lib/openapi/types';
 export async function OpenAPIOperation(props: BlockProps<AnyOpenAPIOperationsBlock>) {
     const { style } = props;
     return (
-        <div className={tcls('flex w-full', style, 'max-w-full')}>
+        <div className={tcls('flex w-full min-w-0', style, 'max-w-full')}>
             <OpenAPIOperationBody {...props} />
         </div>
     );

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

@@ -1,6 +1,6 @@
 /* Layout Components */
 .openapi-operation {
-    @apply flex-1 flex flex-col gap-8 mb-14;
+    @apply flex-1 flex flex-col gap-8 mb-14 min-w-0;
 }
 
 .openapi-schemas {
@@ -397,7 +397,7 @@
 
 /* Path */
 .openapi-path {
-    @apply flex items-center text-sm gap-2 h-fit;
+    @apply flex items-start text-sm gap-2 h-fit min-w-0 max-w-full;
 }
 
 .openapi-path-variable {
@@ -409,14 +409,12 @@
 }
 
 .openapi-path .openapi-method {
-    @apply text-[0.813rem] m-0 h-full items-center flex px-2;
+    @apply text-[0.813rem] m-0 mt-0.5 items-center flex px-2;
 }
 
 .openapi-path-title {
-    @apply flex-1 relative font-normal whitespace-nowrap overflow-x-auto font-mono text-tint-strong/10;
+    @apply flex-1 relative font-normal text-left font-mono text-tint-strong/10;
     @apply py-0.5 px-1 rounded hover:bg-tint cursor-pointer transition-colors;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
 }
 
 .openapi-path-title[data-deprecated="true"] {

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -35,25 +35,19 @@ export function PageBody(props: {
     return (
         <>
             <main
-                className={
-                    tcls(
-                        'flex-1',
-                        'relative',
-                        'py-8',
-                        'lg:px-12',
-                        // Allow words to break if they are too long.
-                        'break-anywhere',
-                        // When in api page mode without the aside, we align with the border of the main content
-                        'page-api-block:xl:max-2xl:pr-0',
-                        // Max size to ensure one column in api is aligned with rest of content (2 x 3xl) + (gap-3 + 2) * px-12
-                        'page-api-block:max-w-screen-2xl',
-                        'page-api-block:mx-auto'
-
-                        // page.layout.tableOfContents ? null : 'xl:ml-56'
-                    ) +
-                    (asFullWidth ? ' page-full-width' : ' page-default-width') +
-                    (!page.layout.tableOfContents ? ' page-no-toc' : ' page-has-toc')
-                }
+                className={tcls(
+                    'relative min-w-0 flex-1',
+                    'py-8 lg:px-12',
+                    // Allow words to break if they are too long.
+                    'break-anywhere',
+                    // When in api page mode without the aside, we align with the border of the main content
+                    'page-api-block:xl:max-2xl:pr-0',
+                    // Max size to ensure one column in api is aligned with rest of content (2 x 3xl) + (gap-3 + 2) * px-12
+                    'page-api-block:mx-auto page-api-block:max-w-screen-2xl',
+                    // page.layout.tableOfContents ? null : 'xl:ml-56',
+                    asFullWidth ? 'page-full-width' : 'page-default-width',
+                    page.layout.tableOfContents ? 'page-has-toc' : 'page-no-toc'
+                )}
             >
                 <PreservePageLayout asFullWidth={asFullWidth} />
                 {page.cover && page.layout.cover && page.layout.coverSize === 'hero' ? (
@@ -66,14 +60,14 @@ export function PageBody(props: {
                         fallback={
                             <DocumentViewSkeleton
                                 document={document}
-                                blockStyle={['page-api-block:ml-0']}
+                                blockStyle="page-api-block:ml-0"
                             />
                         }
                     >
                         <DocumentView
                             document={document}
-                            style={['[&>*+*]:mt-5', 'grid']}
-                            blockStyle={['page-api-block:ml-0']}
+                            style="grid [&>*+*]:mt-5"
+                            blockStyle="page-api-block:ml-0"
                             context={{
                                 mode: 'default',
                                 contentContext: context,
@@ -88,23 +82,9 @@ export function PageBody(props: {
                     <PageFooterNavigation context={context} page={page} />
                 ) : null}
 
-                <div
-                    className={tcls(
-                        'flex',
-                        'flex-row',
-                        'flex-wrap',
-                        'gap-4',
-                        'items-center',
-                        'mt-6',
-                        'max-w-3xl',
-                        'mx-auto',
-                        'page-api-block:ml-0',
-                        'text-tint',
-                        'contrast-more:text-tint-strong'
-                    )}
-                >
+                <div className="mx-auto mt-6 page-api-block:ml-0 flex max-w-3xl flex-row flex-wrap items-center gap-4 text-tint contrast-more:text-tint-strong">
                     {updatedAt ? (
-                        <p className={tcls('mr-auto text-sm')}>
+                        <p className="mr-auto text-sm">
                             {t(language, 'page_last_modified', <DateRelative value={updatedAt} />)}
                         </p>
                     ) : null}

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -136,7 +136,7 @@ export function SpaceLayout(props: {
                                 </>
                             }
                         />
-                        <div className={tcls('flex-1', 'flex', 'flex-col')}>{children}</div>
+                        <div className="flex min-w-0 flex-1 flex-col">{children}</div>
                     </div>
                 </div>