Fix display of cover when TOC is hidden (#328)

* Add visual tests for page options * Fix the case of a landing page * Fix height of the aside when page has a cover * Remove some visual tests
GitbookIO · Mar 22, 2024 · 2ed5445 · 2ed5445
1 parent 755291d
commit 2ed5445
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/e2e/pages.spec.ts b/e2e/pages.spec.ts
@@ -77,17 +77,6 @@ const testCases: TestsCase[] = [
             },
         ],
     },
-    {
-        name: 'GitBook Examples',
-        baseUrl: 'https://examples.gitbook.com',
-        tests: [
-            {
-                name: 'Landing page',
-                url: '',
-                run: waitForCookiesDialog,
-            },
-        ],
-    },
     {
         name: 'Snyk',
         baseUrl: 'https://docs.snyk.io',
@@ -99,17 +88,6 @@ const testCases: TestsCase[] = [
             },
         ],
     },
-    {
-        name: 'Rocket.Chat',
-        baseUrl: 'https://docs.rocket.chat',
-        tests: [
-            {
-                name: 'Home',
-                url: '',
-                run: waitForCookiesDialog,
-            },
-        ],
-    },
     {
         name: 'Versioning',
         baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
@@ -221,6 +199,27 @@ const testCases: TestsCase[] = [
             },
         ],
     },
+    {
+        name: 'Page options',
+        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        tests: [
+            {
+                name: 'With cover',
+                url: 'page-options/page-with-cover',
+                run: waitForCookiesDialog,
+            },
+            {
+                name: 'With hero cover',
+                url: 'page-options/page-with-hero-cover',
+                run: waitForCookiesDialog,
+            },
+            {
+                name: 'With cover and no TOC',
+                url: 'page-options/page-with-cover-and-no-toc',
+                run: waitForCookiesDialog,
+            },
+        ],
+    },
     {
         name: 'Customization',
         baseUrl: 'https://gitbook.gitbook.io/test-1-1/',

diff --git a/src/components/PageAside/PageAside.tsx b/src/components/PageAside/PageAside.tsx
@@ -46,7 +46,8 @@ export async function PageAside(props: {
                 'sticky',
                 'py-8',
                 'break-anywhere', // To prevent long words in headings from breaking the layout
-                withHeaderOffset ? 'lg:h-[calc(100vh_-_4rem)]' : 'lg:h-[100vh]',
+                'lg:h-full',
+                withHeaderOffset ? 'lg:max-h-[calc(100vh_-_4rem)]' : 'lg:max-h-[100vh]',
                 withHeaderOffset ? 'top-16' : 'top-0',
                 'h-[100vh]',
 

diff --git a/src/components/PageBody/PageCover.tsx b/src/components/PageBody/PageCover.tsx
@@ -18,17 +18,22 @@ export async function PageCover(props: {
     cover: RevisionPageDocumentCover;
     context: ContentRefContext;
 }) {
-    const { as, cover, context } = props;
+    const { as, page, cover, context } = props;
     const resolved = cover.ref ? await resolveContentRef(cover.ref, context) : null;
 
     return (
         <div
             className={tcls(
                 'overflow-hidden',
-                '-mx-4',
                 // Negative margin to balance the container padding
+                '-mx-4',
                 as === 'full'
-                    ? ['sm:-mx-6', 'md:-mx-8', 'lg:ml-0', '-lg:mr-8']
+                    ? [
+                          'sm:-mx-6',
+                          'md:-mx-8',
+                          '-lg:mr-8',
+                          page.layout.tableOfContents ? 'lg:ml-0' : null,
+                      ]
                     : ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8'],
             )}
         >