Fix CLS and others (#2536)

Author: gregberge

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx

@@ -77,20 +77,8 @@ export default async function Page(props: {
             {withFullPageCover && page.cover ? (
                 <PageCover as="full" page={page} cover={page.cover} context={contentRefContext} />
             ) : null}
-            <div className={tcls('flex', 'flex-row')}>
-                <PageBody
-                    space={space}
-                    pointer={contentPointer}
-                    contentTarget={contentTarget}
-                    customization={customization}
-                    context={contentRefContext}
-                    page={page}
-                    document={document}
-                    withPageFeedback={
-                        // Display the page feedback in the page footer if the aside is not visible
-                        withPageFeedback && !page.layout.outline
-                    }
-                />
+            {/* We use a flex row reverse to render the aside first because the page is streamed. */}
+            <div className="flex flex-row-reverse justify-end">
                 {page.layout.outline ? (
                     <PageAside
                         space={space}
@@ -104,6 +92,19 @@ export default async function Page(props: {
                         context={contentRefContext}
                     />
                 ) : null}
+                <PageBody
+                    space={space}
+                    pointer={contentPointer}
+                    contentTarget={contentTarget}
+                    customization={customization}
+                    context={contentRefContext}
+                    page={page}
+                    document={document}
+                    withPageFeedback={
+                        // Display the page feedback in the page footer if the aside is not visible
+                        withPageFeedback && !page.layout.outline
+                    }
+                />
             </div>
             <React.Suspense fallback={null}>
                 <PageClientLayout />

packages/gitbook/src/components/Ads/Ad.tsx

@@ -114,7 +114,7 @@ export function Ad({
     }, [visible, zoneId, ignore, placement, mode, siteAdsStatus]);
 
     return (
-        <div ref={containerRef} className={tcls(style)}>
+        <div ref={containerRef} className={tcls(style)} data-visual-test="removed">
             {ad ? (
                 <>
                     {ad}

packages/gitbook/src/components/Cookies/CookiesToast.tsx

@@ -27,7 +27,6 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
 
     const onUpdateState = (enabled: boolean) => {
         setCookiesTracking(enabled);
-
         // Reload the page to take the change in consideration
         window.location.reload();
     };
@@ -75,6 +74,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 )}
             </p>
             <button
+                type="button"
                 onClick={() => setShow(false)}
                 aria-label={tString(language, 'cookies_close')}
                 className={tcls(

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

@@ -25,7 +25,7 @@ import { PageFeedbackForm } from '../PageFeedback';
 /**
  * Aside listing the headings in the document.
  */
-export async function PageAside(props: {
+export function PageAside(props: {
     space: Space;
     site: Site | undefined;
     customization: CustomizationSettings | SiteCustomizationSettings;

packages/gitbook/src/components/primitives/Button.tsx

@@ -74,7 +74,7 @@ export function Button({
     }
 
     return (
-        <button onClick={onClick} className={domClassName}>
+        <button type="button" onClick={onClick} className={domClassName}>
             {children}
         </button>
     );