diff --git a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx index 075de3ccd..a3cb69775 100644 --- a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx +++ b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx @@ -86,7 +86,6 @@ export function DynamicTabs( const orientation: string = 'horizontal'; // TODO: Get orientation from tab block options const position: string = 'start'; // TODO: Get position from tab block options - const description = null; // TODO: Get description from tabs // To avoid issue with hydration, we only use the state from localStorage @@ -183,10 +182,10 @@ export function DynamicTabs(
button]:before:hidden', + 'tab -mx-4 flex overflow-hidden px-4 max-md:shrink-0 max-md:last:pr-0 [&:first-child>button]:before:hidden', active.id === tab.id && 'active-tab z-20', description && [ - 'min-w-56', + 'min-w-56 max-md:max-w-[calc(33.33%+1.75rem)]', orientation === 'horizontal' && 'md:max-w-[calc(33.33%+1.75rem)]', ] )} @@ -220,35 +219,34 @@ export function DynamicTabs( 'relative', // Flared corners - orientation === 'horizontal' && - position === 'start' && [ - 'before:absolute before:size-4 before:transition-all before:content-[""] focus-visible:before:hidden', - 'before:end-full', - 'before:bottom-0', - 'before:rounded-ee-md', - 'circular-corners:before:rounded-ee-2xl', - 'before:border-e before:border-b', - 'before:shadow-[4px_4px_0_1px_var(--tw-shadow-color)]', + 'before:absolute before:size-4 before:transition-all before:content-[""] focus-visible:before:hidden', + 'before:end-full', + 'before:bottom-0', + 'before:rounded-ee-md', + 'circular-corners:before:rounded-ee-2xl', + 'before:border-e before:border-b', + 'before:shadow-[4px_4px_0_1px_var(--tw-shadow-color)]', - 'after:absolute after:size-4 after:transition-all after:content-[""] focus-visible:after:hidden', - 'after:start-full', - 'after:bottom-0', - 'after:rounded-es-md', - 'circular-corners:after:rounded-es-2xl', - 'after:border-s after:border-b', - 'after:shadow-[-4px_4px_0_1px_var(--tw-shadow-color)]', + 'after:absolute after:size-4 after:transition-all after:content-[""] focus-visible:after:hidden', + 'after:start-full', + 'after:bottom-0', + 'after:rounded-es-md', + 'circular-corners:after:rounded-es-2xl', + 'after:border-s after:border-b', + 'after:shadow-[-4px_4px_0_1px_var(--tw-shadow-color)]', - active.id === tab.id - ? [ - 'before:border-tint-subtle after:border-tint-subtle', - 'before:shadow-tint-1 after:shadow-tint-1', - ] - : [ - 'before:border-tint-subtle after:border-tint-subtle', - 'before:shadow-tint-2 after:shadow-tint-2', - 'hover:after:shadow-tint-4 hover:before:shadow-tint-4', - ], - ], + active.id === tab.id + ? [ + 'before:border-tint-subtle after:border-tint-subtle', + 'before:shadow-tint-1 after:shadow-tint-1', + ] + : [ + 'before:border-tint-subtle after:border-tint-subtle', + 'before:shadow-tint-2 after:shadow-tint-2', + 'hover:after:shadow-tint-4 hover:before:shadow-tint-4', + ], + orientation === 'vertical' && 'md:after:hidden md:before:hidden', + 'straight-corners:before:hidden straight-corners:after:hidden', 'max-md:!rounded-b-none max-md:border-b-0',