Improve heading support in tabs

Author: gregberge

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

@@ -29,6 +29,8 @@ 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]',

packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx

@@ -163,26 +163,34 @@ export function DynamicTabs(props: {
                 'straight-corners:rounded-xs',
                 'ring-1 ring-tint-subtle ring-inset',
                 'flex flex-col',
-                'overflow-hidden',
                 className
             )}
         >
             <TabItemList tabs={tabs} activeTabId={active?.id ?? null} onSelect={selectTab} />
             {tabs.map((tab) => (
-                <div
-                    key={tab.id}
-                    role="tabpanel"
-                    id={tab.id}
-                    aria-labelledby={getTabButtonId(tab.id)}
-                    className={tcls('p-4', tab.id !== active?.id ? 'hidden' : null)}
-                >
-                    {tab.body}
-                </div>
+                <TabPanel key={tab.id} tab={tab} isActive={tab.id === active?.id} />
             ))}
         </div>
     );
 }
 
+const TabPanel = memo(function TabPanel(props: {
+    tab: TabsItem;
+    isActive: boolean;
+}) {
+    const { tab, isActive } = props;
+    return (
+        <div
+            role="tabpanel"
+            id={tab.id}
+            aria-labelledby={getTabButtonId(tab.id)}
+            className={tcls('p-4', isActive ? null : 'hidden')}
+        >
+            {tab.body}
+        </div>
+    );
+});
+
 const TabItemList = memo(function TabItemList(props: {
     tabs: TabsItem[];
     activeTabId: string | null;
@@ -204,6 +212,9 @@ const TabItemList = memo(function TabItemList(props: {
             role="tablist"
             className={tcls(
                 'group/tabs',
+                'overflow-hidden',
+                'rounded-t-lg',
+                'straight-corners:rounded-t-xs',
                 'inline-flex',
                 'self-stretch',
                 'after:flex-1',

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

@@ -40,7 +40,7 @@ export function Tabs(props: BlockProps<DocumentBlockTabs>) {
     // When printing, we display the tab, one after the other
     if (context.mode === 'print') {
         return tabs.map((tab) => {
-            <DynamicTabs key={tab.id} id={id} tabs={[tab]} className={tcls(style)} />;
+            return <DynamicTabs key={tab.id} id={id} tabs={[tab]} className={tcls(style)} />;
         });
     }