Improve vertical alignment of site items and fix floating page aside (#3560)

Author: zenoachtig

.changeset/moody-badgers-teach.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Improve vertical alignment of site items and fix floating page aside

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -147,7 +147,7 @@
 }
 
 .openapi-column-preview-body {
-    @apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header:xl:max-2xl:top-32 site-header-sections:top-32 site-header-sections:xl:max-2xl:top-44 print-mode:static;
+    @apply flex flex-col gap-4 sticky top-[calc(var(--toc-top-offset)+5rem)] print-mode:static;
 }
 
 .openapi-column-preview pre {

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

@@ -40,7 +40,7 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
     });
 
     return (
-        <ul className={tcls('sidebar-list-line:border-l', 'border-tint-subtle')}>
+        <ul className="flex flex-col border-tint-subtle sidebar-list-line:border-l">
             {sections.map((section) => (
                 <motion.li
                     key={section.id}
@@ -50,6 +50,8 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
                         'relative',
                         'h-fit',
                         'mt-2',
+                        'first:mt-0',
+                        'mb-0.5',
                         section.depth > 1 && ['ml-3', 'my-0', 'sidebar-list-line:ml-0']
                     )}
                 >

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

@@ -50,7 +50,7 @@ export function PageBody(props: {
             <main
                 className={tcls(
                     'relative min-w-0 flex-1',
-                    'mx-auto max-w-screen-2xl py-11',
+                    'mx-auto 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',

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

@@ -28,6 +28,8 @@ export async function PageHeader(props: {
         externalAI: true,
     };
 
+    const hasAncestors = ancestors.length > 0;
+
     return (
         <header
             className={tcls(
@@ -37,16 +39,17 @@ export async function PageHeader(props: {
                 'mb-6',
                 'space-y-3',
                 'page-api-block:ml-0',
-                'page-api-block:max-w-full'
+                'page-api-block:max-w-full',
+                hasAncestors ? 'page-has-ancestors' : 'page-no-ancestors'
             )}
         >
             {page.layout.tableOfContents &&
             // Show page actions if *any* of the actions are enabled
             (withAIChat || pageActions.markdown || pageActions.externalAI) ? (
                 <div
                     className={tcls(
-                        'float-right mb-2 ml-4 xl:max-2xl:page-api-block:mr-58',
-                        ancestors.length > 0 ? '-mt-2' : '-mt-3 xs:mt-2'
+                        'float-right ml-4 xl:max-2xl:page-api-block:mr-62',
+                        hasAncestors ? '-my-1.5' : '-mt-3 xs:mt-2'
                     )}
                 >
                     <AIActionsDropdown
@@ -57,7 +60,7 @@ export async function PageHeader(props: {
                     />
                 </div>
             ) : null}
-            {ancestors.length > 0 && (
+            {hasAncestors && (
                 <nav aria-label="Breadcrumb">
                     <ol className={tcls('flex', 'flex-wrap', 'items-center', 'gap-2', 'text-tint')}>
                         {ancestors.map((breadcrumb, index) => {

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

@@ -14,7 +14,7 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup }) {
         <li className="group/page-group-item flex flex-col">
             <div
                 className={tcls(
-                    '-top-5 group-first/page-group-item:-mt-5 sticky z-1 flex items-center gap-3 px-3 pt-6',
+                    '-top-6 group-first/page-group-item:-mt-6 sticky z-1 flex items-center gap-3 px-3 pt-6',
                     'font-semibold text-xs uppercase tracking-wide',
                     'pb-3', // Add extra padding to make the header fade a bit nicer
                     '-mb-1.5', // Then pull the page items a bit closer, effective bottom padding is 1.5 units / 6px.

packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx

@@ -18,16 +18,17 @@ export function TableOfContentsScript() {
 
             // Set sticky top position based on header
             const headerHeight = header?.offsetHeight ?? 0;
-            root.style.setProperty('--toc-top-offset', `${headerHeight}px`);
 
             // Start with full viewport height minus header
             let height = window.innerHeight - headerHeight;
+            let offset = headerHeight;
 
             // Subtract visible banner (if any)
             if (banner && window.getComputedStyle(banner).display !== 'none') {
                 const bannerRect = banner.getBoundingClientRect();
                 if (bannerRect.height > 0 && bannerRect.bottom > 0) {
                     height -= Math.min(bannerRect.height, bannerRect.bottom);
+                    offset += Math.min(bannerRect.height, bannerRect.bottom);
                 }
             }
 
@@ -41,6 +42,7 @@ export function TableOfContentsScript() {
 
             // Update height
             root.style.setProperty('--toc-height', `${height}px`);
+            root.style.setProperty('--toc-top-offset', `${offset}px`);
         };
 
         // Initial update