Restore dropdown and section tabs behaviour

Author: zenoachtig

packages/gitbook/src/components/Header/Dropdown.tsx

@@ -53,7 +53,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                     className
                 )}
             >
-                <div className='fixed z-50 w-52'>
+                <div className="fixed z-50 w-52">
                     <div
                         className={tcls(
                             'w-full',

packages/gitbook/src/components/Header/Header.tsx

@@ -162,8 +162,8 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                         'overflow-x-scroll',
                         'overflow-y-hidden',
                         'hide-scroll',
+                        '-mb-4 pb-4', // Positive padding / negative margin allows the navigation menu indicator to show in a scroll viewƒ
                         !sections ? ['hidden', 'page-no-toc:flex'] : 'flex'
-                        // page-no-toc:mr-[max(calc((100%-14rem-48rem-14rem-6rem)/2),.5rem)] w-64 *:shrink-0 *:grow max-md:only:w-full xl:mr-[max(calc((100%-18rem-48rem-14rem)/2+2rem),5rem)]
                     )}
                 >
                     <div
@@ -179,7 +179,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                         {siteSpaces.length > 1 && (
                             <div
                                 id="variants"
-                                className='my-2 mr-5 page-no-toc:flex hidden grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64'
+                                className="my-2 mr-5 page-no-toc:flex hidden grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
                             >
                                 <SpacesDropdown
                                     context={context}

packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx

@@ -21,26 +21,27 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
     } = props;
     const [value, setValue] = React.useState<string | null>();
     const [offset, setOffset] = React.useState<number | null>(null);
-    const scrollableViewRef = React.useRef<HTMLDivElement>(null);
+    const menuContainerRef = React.useRef<HTMLDivElement>(null);
 
     const onNodeUpdate = (trigger: HTMLButtonElement | null, itemValue: string, size = 0) => {
+        const padding = 16;
+        const margin = -12; // Offsetting the menu container's negative margin
         const windowWidth = document.documentElement.clientWidth;
+        const windowBuffer = 16; // constrain to within the window with some buffer on the left and right we don't want the menu to enter
+        const viewportWidth =
+            size < MIN_ITEMS_FOR_COLS
+                ? VIEWPORT_ITEM_WIDTH + padding
+                : VIEWPORT_ITEM_WIDTH * 2 + padding;
+        const minOffset = 0 - (menuContainerRef.current?.offsetLeft ?? 0) + margin;
+        const maxOffset = minOffset + windowWidth - viewportWidth;
+
         if (windowWidth < 768) {
             // if the screen is small don't offset the menu
-            setOffset(0);
+            setOffset(minOffset + windowBuffer);
         } else if (trigger && value === itemValue) {
-            const padding = 16;
-            const viewportWidth =
-                size < MIN_ITEMS_FOR_COLS
-                    ? VIEWPORT_ITEM_WIDTH + padding
-                    : VIEWPORT_ITEM_WIDTH * 2 + padding;
-            const scrollLeft = scrollableViewRef.current?.scrollLeft ?? 0;
-            const triggerOffset = trigger.offsetLeft - scrollLeft; // offset of the trigger from the left edge including scrolling
-            const bufferLeft = 2; // offset the menu viewport should not pass on the left side of window
-            const bufferRight = windowWidth - (16 + viewportWidth); // offset the menu viewport should not pass on the right side of the window
+            const position = minOffset + trigger?.getBoundingClientRect().left;
             setOffset(
-                // constrain to within the window with some buffer on the left and right we don't want the menu to enter
-                Math.min(bufferRight, Math.max(bufferLeft, Math.round(triggerOffset)))
+                Math.min(maxOffset - windowBuffer, Math.max(minOffset + windowBuffer, position))
             );
         } else if (!value) {
             setOffset(null);
@@ -55,7 +56,7 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
             className="z-10 flex w-full flex-nowrap items-center"
         >
             <div
-                ref={scrollableViewRef}
+                ref={menuContainerRef}
                 className="-mx-3"
                 // className="-mb-4 pb-4" /* Positive padding / negative margin allows the navigation menu indicator to show in a scroll view */
             >
@@ -123,11 +124,11 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
                 className="absolute top-full flex transition-transform duration-200 ease-in-out"
                 style={{
                     display: offset === null ? 'none' : undefined,
-                    transform: offset ? `translateX(${offset}px)` : undefined,
+                    transform: offset ? `translateX(${offset}px) translateZ(0)` : 'translateZ(0)', // TranslateZ is needed to force a stacking context, fixing a rendering bug on Safari
                 }}
             >
                 <NavigationMenu.Viewport
-                    className="relative mt-3 ml-4 h-[var(--radix-navigation-menu-viewport-height)] w-[calc(100vw_-_2rem)] origin-[top_center] overflow-hidden rounded straight-corners:rounded-none bg-tint shadow-1xs shadow-dark/1 duration-250 data-[state=closed]:duration-150 motion-safe:transition-[width,_height,_transform] data-[state=closed]:motion-safe:animate-scaleOut data-[state=open]:motion-safe:animate-scaleIn md:mx-0 md:w-[var(--radix-navigation-menu-viewport-width)] dark:shadow-dark/4"
+                    className="relative mt-3 h-[var(--radix-navigation-menu-viewport-height)] w-[calc(100vw_-_2rem)] origin-[top_center] overflow-hidden rounded straight-corners:rounded-none bg-tint shadow-1xs shadow-dark/1 duration-250 data-[state=closed]:duration-150 motion-safe:transition-[width,_height,_transform] data-[state=closed]:motion-safe:animate-scaleOut data-[state=open]:motion-safe:animate-scaleIn md:mx-0 md:w-[var(--radix-navigation-menu-viewport-width)] dark:shadow-dark/4"
                     style={{
                         translate:
                             undefined /* don't move this to a Tailwind class as Radix renders viewport incorrectly for a few frames */,

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

@@ -107,7 +107,11 @@ export function TableOfContents(props: {
                         rootPages={pages}
                         pages={pages}
                         context={context}
-                        style={tcls('page-no-toc:hidden', 'sidebar-list-line:border-l', 'border-tint-subtle')}
+                        style={tcls(
+                            'page-no-toc:hidden',
+                            'sidebar-list-line:border-l',
+                            'border-tint-subtle'
+                        )}
                     />
                     {customization.trademark.enabled ? (
                         <Trademark