Improve tabs (#3735)

Author: gregberge

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

@@ -51,7 +51,7 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
                     className={tcls(
                         'inline-block',
                         'size-3',
-                        'mr-2',
+                        'mr-3',
                         'mb-1',
                         'transition-transform',
                         'shrink-0',
@@ -96,7 +96,7 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
                 document={document}
                 ancestorBlocks={[...ancestorBlocks, block]}
                 context={context}
-                style={['px-10', 'pb-5', 'space-y-4']}
+                style="space-y-4 px-10 pb-5"
             />
         </Details>
     );

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

@@ -1,6 +1,7 @@
 import { type ClassValue, tcls } from '@/lib/tailwind';
 import type { DocumentBlockHeading, DocumentBlockTabs } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
+import { Link } from '../primitives';
 import { getBlockTextStyle } from './spacing';
 
 /**
@@ -28,17 +29,19 @@ export function HashLinkButton(props: {
                 'h-[1em]',
                 'border-0',
                 'opacity-0',
+                'site-background',
+                'rounded',
                 'group-hover/hash:opacity-[0]',
                 'group-focus/hash:opacity-[0]',
                 'md:group-hover/hash:opacity-[1]',
                 'md:group-focus/hash:opacity-[1]',
                 className
             )}
         >
-            <a
+            <Link
                 href={`#${id}`}
                 aria-label={label}
-                className={tcls('inline-flex', 'h-full', 'items-start', textStyle.lineHeight)}
+                className={tcls('inline-flex h-full items-start', textStyle.lineHeight)}
             >
                 <Icon
                     icon="hashtag"
@@ -52,7 +55,7 @@ export function HashLinkButton(props: {
                         iconClassName
                     )}
                 />
-            </a>
+            </Link>
         </div>
     );
 }