Fix trademark & other visual bugs

Author: zenoachtig

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

@@ -32,7 +32,8 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
                                 'my-2',
                                 'border-tint-subtle',
                                 'sidebar-list-default:border-l',
-                                'sidebar-list-line:border-l'
+                                'sidebar-list-line:border-l',
+                                'break-anywhere'
                             )}
                         />
                     ) : null

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

@@ -39,7 +39,7 @@ export async function TableOfContents(props: {
                     'grow-0',
                     'shrink-0',
 
-                    'max-w-72',
+                    'w-72',
                     'basis-72',
                     'lg:page-no-toc:basis-56',
 
@@ -109,14 +109,13 @@ export async function TableOfContents(props: {
                     <TOCScrollContainer // The scrollview inside the sidebar
                         className={tcls(
                             'flex grow flex-col p-2 pt-4',
-                            customization.trademark.enabled && 'lg:pb-20',
                             'hide-scrollbar overflow-y-auto'
                         )}
                     >
                         <PagesList
                             pages={pages}
                             isRoot={true}
-                            style="page-no-toc:hidden border-tint-subtle sidebar-list-line:border-l"
+                            style="mb-5 page-no-toc:hidden grow border-tint-subtle sidebar-list-line:border-l"
                         />
                         {customization.trademark.enabled ? (
                             <Trademark

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

@@ -17,18 +17,14 @@ export function Trademark(props: {
     return (
         <div
             className={tcls(
-                'relative',
+                'sticky',
                 'z-2',
-                'lg:absolute',
 
-                'left-0',
-                'right-2',
-                'bottom-0',
+                'inset-x-0',
+                '-bottom-2',
+                '-mb-2',
 
                 'pointer-events-none',
-                'sidebar-filled:pl-2',
-                'sidebar-filled:pb-2',
-                'sidebar-filled:page-no-toc:p-0',
 
                 'bg-tint-base',
                 'sidebar-filled:bg-tint-subtle',
@@ -38,24 +34,7 @@ export function Trademark(props: {
 
                 'rounded-lg',
                 'straight-corners:rounded-none',
-                'circular-corners:rounded-2xl',
-
-                'before:hidden',
-                'lg:before:block',
-                'before:content-[""]',
-                'before:absolute',
-                'before:inset-x-0',
-                'before:bottom-full',
-                'before:h-8',
-                'before:bg-linear-to-b',
-                'before:from-transparent',
-                'before:to-tint-base',
-                'sidebar-filled:before:to-tint-subtle',
-                'theme-muted:before:to-tint-subtle',
-                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-subtle',
-                '[html.sidebar-filled.theme-muted_&]:before:to-tint-base',
-                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base',
-                'page-no-toc:before:to-transparent!'
+                'circular-corners:rounded-2xl'
             )}
         >
             <TrademarkLink {...props} />