Improve wide page width (#3692)

Author: zenoachtig

.changeset/silly-ducks-kiss.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Improve wide page width layout

packages/gitbook/src/components/DocumentView/Blocks.tsx

@@ -89,7 +89,7 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
                     node.data && 'fullWidth' in node.data && node.data.fullWidth
                         ? 'max-w-screen-xl'
                         : 'max-w-3xl',
-                    FULL_WIDTH_BLOCKS.includes(node.type) && 'page-width-wide:max-w-screen-2xl',
+                    FULL_WIDTH_BLOCKS.includes(node.type) && 'page-width-wide:max-w-full',
                     blockStyle,
                 ]}
                 isEstimatedOffscreen={isOffscreen}

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -35,6 +35,7 @@ export function PageAside(props: {
         <aside
             className={tcls(
                 'group/aside',
+                'order-last',
                 'hidden',
                 'pt-8',
                 'pb-4',

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

@@ -51,10 +51,10 @@ export function PageBody(props: {
             <main
                 className={tcls(
                     'relative min-w-0 flex-1',
-                    'mx-auto max-w-screen-2xl py-8',
+                    'max-w-screen-2xl py-8',
                     // Allow words to break if they are too long.
                     'break-anywhere',
-                    pageWidthWide ? 'page-width-wide 2xl:px-8' : 'page-width-default',
+                    pageWidthWide ? 'page-width-wide 3xl:px-8' : 'page-width-default',
                     siteWidthWide ? 'site-width-wide' : 'site-width-default',
                     page.layout.tableOfContents ? 'page-has-toc' : 'page-no-toc'
                 )}

packages/gitbook/src/components/SitePage/SitePage.tsx

@@ -43,38 +43,42 @@ export async function SitePage(props: SitePageProps) {
 
     return (
         <PageContextProvider pageId={page.id} spaceId={context.space.id} title={page.title}>
-            {withFullPageCover && page.cover ? (
-                <PageCover as="full" page={page} cover={page.cover} context={context} />
-            ) : null}
-            {/* We use a flex row reverse to render the aside first because the page is streamed. */}
-            <div
-                className={tcls(
-                    'flex grow flex-row-reverse justify-end',
-                    withSections
-                        ? '[--content-scroll-margin:calc(var(--spacing)*27)]'
-                        : '[--content-scroll-margin:calc(var(--spacing)*16)]'
-                )}
-            >
-                <PageAside
-                    page={page}
-                    document={document}
-                    withHeaderOffset={headerOffset}
-                    withFullPageCover={withFullPageCover}
-                    withPageFeedback={withPageFeedback}
-                    context={context}
-                />
-                <PageBody
-                    context={context}
-                    page={page}
-                    ancestors={ancestors}
-                    document={document}
-                    withPageFeedback={withPageFeedback}
-                    insightsDisplayContext={SiteInsightsDisplayContext.Site}
-                />
+            {/* Using `contents` makes the children of this div according to its parent — which keeps them in a single flex row with the TOC by default.
+            If there's a page cover, we use `flex flex-col` to lay out the PageCover above the PageBody + PageAside instead. */}
+            <div className={withFullPageCover && page.cover ? 'flex grow flex-col' : 'contents'}>
+                {withFullPageCover && page.cover ? (
+                    <PageCover as="full" page={page} cover={page.cover} context={context} />
+                ) : null}
+
+                <div
+                    className={tcls(
+                        withFullPageCover && page.cover ? 'flex grow flex-row' : 'contents',
+                        withSections
+                            ? '[--content-scroll-margin:calc(var(--spacing)*27)]'
+                            : '[--content-scroll-margin:calc(var(--spacing)*16)]'
+                    )}
+                >
+                    <PageAside
+                        page={page}
+                        document={document}
+                        withHeaderOffset={headerOffset}
+                        withFullPageCover={withFullPageCover}
+                        withPageFeedback={withPageFeedback}
+                        context={context}
+                    />
+                    <PageBody
+                        context={context}
+                        page={page}
+                        ancestors={ancestors}
+                        document={document}
+                        withPageFeedback={withPageFeedback}
+                        insightsDisplayContext={SiteInsightsDisplayContext.Site}
+                    />
+                </div>
+                <React.Suspense fallback={null}>
+                    <PageClientLayout />
+                </React.Suspense>
             </div>
-            <React.Suspense fallback={null}>
-                <PageClientLayout />
-            </React.Suspense>
         </PageContextProvider>
     );
 }

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

@@ -137,6 +137,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                         'flex',
                         'flex-col',
                         'lg:flex-row',
+                        'lg:justify-center',
                         CONTAINER_STYLE,
                         'site-width-wide:max-w-full',
 
@@ -223,7 +224,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                             </>
                         }
                     />
-                    <div className="flex min-w-0 flex-1 flex-col">{children}</div>
+                    {children}
                 </div>
             </div>