Fix styling

Author: nolannbiron

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -71,20 +71,18 @@ export function SpaceLayout(props: {
                 <MobileMenuSheet>
                     <TOCScrollContent
                         innerHeader={
-                            <div className="pl-5">
-                                {isMultiVariants ? (
-                                    <SpacesDropdown
-                                        context={context}
-                                        siteSpace={siteSpace}
-                                        siteSpaces={siteSpaces}
-                                        className={tcls(
-                                            'w-full',
-                                            'page-no-toc:hidden',
-                                            'site-header-none:page-no-toc:flex'
-                                        )}
-                                    />
-                                ) : null}
-                            </div>
+                            isMultiVariants ? (
+                                <SpacesDropdown
+                                    context={context}
+                                    siteSpace={siteSpace}
+                                    siteSpaces={siteSpaces}
+                                    className={tcls(
+                                        'w-full',
+                                        'page-no-toc:hidden',
+                                        'site-header-none:page-no-toc:flex'
+                                    )}
+                                />
+                            ) : null
                         }
                         context={context}
                     />
@@ -123,7 +121,7 @@ export function SpaceLayout(props: {
                             }
                             innerHeader={
                                 // displays the search button and/or the space dropdown in the ToC according to the header/variant settings. E.g if there is no header, the search button will be displayed in the ToC.
-                                <div className="inline-flex w-full flex-col gap-2 px-4">
+                                <>
                                     {!withTopHeader && (
                                         <div className={tcls('hidden', 'lg:block')}>
                                             <React.Suspense fallback={null}>
@@ -155,11 +153,12 @@ export function SpaceLayout(props: {
                                             className={tcls(
                                                 'w-full',
                                                 'page-no-toc:hidden',
-                                                'site-header-none:page-no-toc:flex'
+                                                'site-header-none:page-no-toc:flex',
+                                                'mb-2'
                                             )}
                                         />
                                     )}
-                                </div>
+                                </>
                             }
                         />
                         <div className="flex min-w-0 flex-1 flex-col">{children}</div>

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

@@ -31,11 +31,15 @@ export function TOCScrollContent(props: {
                 'straight-corners:rounded-none'
             )}
         >
-            {innerHeader && <div className="*:mt-0.5 max-lg:mt-2 max-lg:pr-12">{innerHeader}</div>}
+            {!!innerHeader && (
+                <div className="inline-flex w-full flex-col gap-2 px-3 *:mt-0.5 max-lg:mt-3 max-lg:pr-12 lg:px-2 lg:pr-4">
+                    {innerHeader}
+                </div>
+            )}
 
             <TOCScrollContainer // The scrollview inside the sidebar
                 className={tcls(
-                    'flex flex-grow flex-col p-2',
+                    'flex flex-grow flex-col p-3 lg:p-2',
                     innerHeader ? 'mt-0' : 'mt-8',
                     customization.trademark.enabled && 'pb-20',
                     'gutter-stable overflow-y-auto',

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

@@ -25,8 +25,9 @@ export function Trademark(props: {
                 'absolute',
 
                 'lg:left-0',
-                'left-2',
-                'right-2',
+                'left-3',
+                'lg:right-2',
+                'right-3',
                 'bottom-0',
 
                 'py-2',

packages/gitbook/src/components/utils/Sheet.tsx

@@ -54,17 +54,19 @@ export function SheetContent({
             <SheetPrimitive.Content
                 data-slot="sheet-content"
                 className={tcls(
-                    'fixed z-30 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+                    'fixed z-30 flex flex-col rounded-xl shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
                     'border-tint-subtle',
+                    'inset-x-1.5 inset-y-1.5 w-10/12 border sm:max-w-sm',
                     'bg-tint-base',
+                    'theme-gradient:bg-gradient-primary',
+                    'sidebar-filled:bg-tint-subtle',
+                    'theme-muted:bg-tint-subtle',
                     'sidebar-filled:bg-tint-subtle',
                     'theme-muted:bg-tint-subtle',
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
                     '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
-                    '[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
-                    '[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
-                    'inset-x-1.5 inset-y-1.5 w-10/12 rounded-xl border sm:max-w-sm',
+                    'straight-corners:rounded-none',
                     side === 'right' &&
                         'right-1.5 data-[state=closed]:animate-exitToRight data-[state=open]:animate-enterFromRight',
                     side === 'left' &&
@@ -82,7 +84,7 @@ export function SheetContent({
                         icon="close"
                         iconOnly
                         size="default"
-                        className="absolute top-3 right-2"
+                        className="absolute top-3 right-2 z-50"
                     >
                         <span className="sr-only">Close</span>
                     </Button>
@@ -102,16 +104,6 @@ export function SheetHeader({ className, ...props }: React.ComponentProps<'div'>
     );
 }
 
-export function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot="sheet-footer"
-            className={tcls('mt-auto flex flex-col gap-2 p-4', className)}
-            {...props}
-        />
-    );
-}
-
 export function SheetTitle({
     className,
     ...props