mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-24 19:32:07 +00:00
Fix OpenAPI overflow issue (#3015)
This commit is contained in:
Greg Bergé
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"gitbook": patch
|
||||
---
|
||||
|
||||
Fix OpenAPI block overflow issue
|
||||
@@ -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 },
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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\("([^"]+)"\)/);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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"] {
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user