Fix various styling issues (#3283)

Author: zenoachtig

.changeset/big-gorillas-perform.md

@@ -0,0 +1,9 @@
+---
+"gitbook": patch
+---
+
+Fix three small visual issues
+
+- Fix sidebar showing on `no-toc` pages in the gradient theme
+- Fix variant selector truncating incorrectly in header when sections are present
+- Fix page cover alignment on `lg` screens without TOC

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

@@ -42,7 +42,7 @@ export function Caption(
             'after:pointer-events-none',
             fit ? 'w-fit' : null,
             withBorder
-                ? 'rounded straight-corners:rounded-none after:border-tint-subtle after:border after:rounded straight-corners:after:rounded-none dark:after:mix-blend-plus-lighter after:pointer-events-none'
+                ? 'rounded circular-corners:rounded-2xl straight-corners:rounded-none after:border-tint-subtle after:border after:rounded circular-corners:after:rounded-2xl straight-corners:after:rounded-none dark:after:mix-blend-plus-lighter after:pointer-events-none'
                 : null,
         ],
         style,

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

@@ -34,13 +34,13 @@ export function StepperStep(props: BlockProps<DocumentBlockStepperStep>) {
             <div className="relative select-none">
                 <div
                     className={tcls(
-                        'can-override-bg can-override-text flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-subtle tabular-nums',
-                        'font-medium text-primary'
+                        'can-override-bg can-override-text flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-solid theme-muted:bg-primary-subtle tabular-nums',
+                        'font-medium text-contrast-primary-solid theme-muted:text-primary'
                     )}
                 >
                     {index + 1}
                 </div>
-                <div className="can-override-bg absolute top-9 bottom-2 left-[0.875rem] w-px bg-primary-subtle" />
+                <div className="can-override-bg absolute top-9 bottom-2 left-[0.875rem] w-px bg-primary-7 theme-muted:bg-primary-subtle" />
             </div>
             <Blocks
                 {...contextProps}

packages/gitbook/src/components/Header/SpacesDropdown.tsx

@@ -62,7 +62,7 @@ export function SpacesDropdown(props: {
                         className
                     )}
                 >
-                    <span className={tcls('line-clamp-1', 'grow')}>{siteSpace.title}</span>
+                    <span className={tcls('truncate', 'grow')}>{siteSpace.title}</span>
                     <DropdownChevron />
                 </div>
             }

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

@@ -37,7 +37,7 @@ export async function PageCover(props: {
                           'lg:ml-0',
                           !page.layout.tableOfContents &&
                           context.customization.header.preset !== 'none'
-                              ? 'lg:-ml-64'
+                              ? 'xl:-ml-64'
                               : null,
                       ]
                     : ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8']

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

@@ -107,6 +107,7 @@ function NavigationCard(
                 'border',
                 'border-tint-subtle',
                 'rounded',
+                'circular-corners:rounded-2xl',
                 'straight-corners:rounded-none',
                 'hover:border-primary',
                 'text-pretty',

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

@@ -84,6 +84,7 @@ export function TableOfContents(props: {
                         '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
                         '[html.sidebar-filled.theme-gradient_&]:border',
                         'page-no-toc:!bg-transparent',
+                        'page-no-toc:!border-none',
 
                         'sidebar-filled:rounded-xl',
                         'straight-corners:rounded-none',