diff --git a/.changeset/gold-flowers-joke.md b/.changeset/gold-flowers-joke.md new file mode 100644 index 000000000..b524dd1fb --- /dev/null +++ b/.changeset/gold-flowers-joke.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Round page cover corners on extrawide screens diff --git a/packages/gitbook/src/components/PageBody/PageCover.tsx b/packages/gitbook/src/components/PageBody/PageCover.tsx index 591629630..96dbc4993 100644 --- a/packages/gitbook/src/components/PageBody/PageCover.tsx +++ b/packages/gitbook/src/components/PageBody/PageCover.tsx @@ -90,12 +90,22 @@ export async function PageCover(props: { ? [ 'sm:-mx-6', 'md:-mx-8', - 'lg:-mr-8', - 'lg:-ml-12', !page.layout.tableOfContents && context.customization.header.preset !== 'none' - ? 'xl:-ml-76' - : null, + ? [ + 'xl:-ml-76', + // Round the bottom corners once the page is wider than the image + '2xl:circular-corners:rounded-b-3xl 2xl:rounded-corners:rounded-b-xl', + ] + : [ + 'lg:-ml-12', + // Round the bottom left corner once the sidebar is shown next to it + 'lg:rounded-corners:rounded-bl-xl', + 'lg:circular-corners:rounded-bl-3xl', + // Round the bottom right corner once the page is wider than the image + '2xl:rounded-corners:rounded-br-xl', + '2xl:circular-corners:rounded-br-3xl', + ], ] : [ 'sm:mx-auto',