From 0fdb8414ab679c2fa68e563d6a7c7a7213c035f0 Mon Sep 17 00:00:00 2001
From: Nolann Biron <biron.nolann@gmail.com>
Date: Tue, 22 Jul 2025 17:24:26 +0200
Subject: [PATCH] Remove scroll-nojump utility and update layout structure

Eliminated the .scroll-nojump utility and related CSS from globals.css and refactored layout components (Header, Footer, AnnouncementBanner, SpaceLayout) to remove unnecessary wrapper divs. Updated scrollbar styling to use native CSS properties for improved consistency and maintainability.
---
 .../Announcement/AnnouncementBanner.tsx       | 120 +++++-----
 .../gitbook/src/components/Footer/Footer.tsx  | 198 ++++++++--------
 .../gitbook/src/components/Header/Header.tsx  | 218 +++++++++---------
 .../src/components/RootLayout/globals.css     |  38 +--
 .../components/SpaceLayout/SpaceLayout.tsx    | 121 +++++-----
 5 files changed, 328 insertions(+), 367 deletions(-)

diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
index e4a55c6e03..117b44e49e 100644
--- a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
+++ b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -34,68 +34,66 @@ export function AnnouncementBanner(props: {
             className="theme-bold:bg-header-background pt-4 pb-2"
             data-nosnippet=""
         >
-            <div className="scroll-nojump">
-                <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
-                    <div className={tcls('relative', CONTAINER_STYLE)}>
-                        <Tag
-                            href={contentRef?.href ?? ''}
-                            className={tcls(
-                                'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
-                                style.container,
-                                closeable && 'pr-12',
-                                hasLink && style.hover
-                            )}
-                            insights={
-                                announcement.link
-                                    ? {
-                                          type: 'link_click',
-                                          link: {
-                                              target: announcement.link.to,
-                                              position: SiteInsightsLinkPosition.Announcement,
-                                          },
-                                      }
-                                    : undefined
-                            }
+            <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className={tcls('relative', CONTAINER_STYLE)}>
+                    <Tag
+                        href={contentRef?.href ?? ''}
+                        className={tcls(
+                            'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
+                            style.container,
+                            closeable && 'pr-12',
+                            hasLink && style.hover
+                        )}
+                        insights={
+                            announcement.link
+                                ? {
+                                      type: 'link_click',
+                                      link: {
+                                          target: announcement.link.to,
+                                          position: SiteInsightsLinkPosition.Announcement,
+                                      },
+                                  }
+                                : undefined
+                        }
+                    >
+                        <Icon
+                            icon={style.icon as IconName}
+                            className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
+                        />
+                        <div>
+                            {announcement.message}
+                            {hasLink ? (
+                                <div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
+                                    {contentRef?.icon ? (
+                                        <span className="mr-1 ml-2 *:inline">
+                                            {contentRef?.icon}
+                                        </span>
+                                    ) : null}
+                                    {announcement.link?.title && (
+                                        <span className="mr-1">{announcement.link?.title}</span>
+                                    )}
+                                    <Icon
+                                        icon={
+                                            announcement.link?.to.kind === 'url'
+                                                ? 'arrow-up-right'
+                                                : 'chevron-right'
+                                        }
+                                        className={tcls('mb-0.5 inline size-3')}
+                                    />
+                                </div>
+                            ) : null}
+                        </div>
+                    </Tag>
+                    {closeable ? (
+                        <button
+                            className={`absolute top-0 right-4 mt-2 mr-2 rounded circular-corners:rounded-lg straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
+                            type="button"
+                            onClick={dismissAnnouncement}
+                            title={tString(language, 'close')}
                         >
-                            <Icon
-                                icon={style.icon as IconName}
-                                className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
-                            />
-                            <div>
-                                {announcement.message}
-                                {hasLink ? (
-                                    <div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
-                                        {contentRef?.icon ? (
-                                            <span className="mr-1 ml-2 *:inline">
-                                                {contentRef?.icon}
-                                            </span>
-                                        ) : null}
-                                        {announcement.link?.title && (
-                                            <span className="mr-1">{announcement.link?.title}</span>
-                                        )}
-                                        <Icon
-                                            icon={
-                                                announcement.link?.to.kind === 'url'
-                                                    ? 'arrow-up-right'
-                                                    : 'chevron-right'
-                                            }
-                                            className={tcls('mb-0.5 inline size-3')}
-                                        />
-                                    </div>
-                                ) : null}
-                            </div>
-                        </Tag>
-                        {closeable ? (
-                            <button
-                                className={`absolute top-0 right-4 mt-2 mr-2 rounded circular-corners:rounded-lg straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
-                                type="button"
-                                onClick={dismissAnnouncement}
-                                title={tString(language, 'close')}
-                            >
-                                <Icon icon="close" className="size-4" />
-                            </button>
-                        ) : null}
-                    </div>
+                            <Icon icon="close" className="size-4" />
+                        </button>
+                    ) : null}
                 </div>
             </div>
         </div>
diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx
index 31c2c5fd59..8deba384eb 100644
--- a/packages/gitbook/src/components/Footer/Footer.tsx
+++ b/packages/gitbook/src/components/Footer/Footer.tsx
@@ -32,111 +32,109 @@ export function Footer(props: { context: GitBookSiteContext }) {
                 mobileOnly ? 'xl:hidden' : null
             )}
         >
-            <div className="scroll-nojump">
-                <div className={tcls(CONTAINER_STYLE, 'px-4', 'py-8', 'lg:py-12', 'mx-auto')}>
-                    <div
-                        className={tcls(
-                            'lg:!max-w-none mx-auto grid max-w-3xl site-width-wide:max-w-screen-2xl justify-between gap-12',
-                            'grid-cols-[auto_auto]',
-                            'lg:grid-cols-[18rem_minmax(auto,_48rem)_auto]',
-                            'xl:grid-cols-[18rem_minmax(auto,_48rem)_14rem]',
-                            'site-width-wide:lg:grid-cols-[18rem_minmax(auto,_80rem)_auto]',
-                            'site-width-wide:xl:grid-cols-[18rem_minmax(auto,_80rem)_14rem]',
-                            'page-no-toc:lg:grid-cols-[minmax(auto,_48rem)_auto]',
-                            'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]',
-                            '[body:has(.site-width-wide,.page-no-toc)_&]:lg:grid-cols-[minmax(auto,_90rem)_auto]',
-                            '[body:has(.site-width-wide,.page-no-toc)_&]:xl:grid-cols-[14rem_minmax(auto,_90rem)_14rem]'
-                        )}
-                    >
-                        {
-                            // Footer Logo
-                            customization.footer.logo ? (
-                                <div className="col-start-1 row-start-1">
-                                    <Image
-                                        alt="Logo"
-                                        resize={context.imageResizer}
-                                        sources={{
-                                            light: {
-                                                src: customization.footer.logo.light,
-                                            },
-                                            dark: customization.footer.logo.dark
-                                                ? {
-                                                      src: customization.footer.logo.dark,
-                                                  }
-                                                : null,
-                                        }}
-                                        priority="lazy"
-                                        style={[
-                                            'w-auto',
-                                            'max-w-40',
-                                            'lg:max-w-64',
-                                            'max-h-10',
-                                            'lg:max-h-12',
-                                            'object-contain',
-                                            'object-left',
-                                            'rounded',
-                                            'straight-corners:rounded-sm',
-                                        ]}
-                                        sizes={[
-                                            {
-                                                width: 320,
-                                            },
-                                        ]}
-                                    />
-                                </div>
-                            ) : null
-                        }
+            <div className={tcls(CONTAINER_STYLE, 'px-4', 'py-8', 'lg:py-12', 'mx-auto')}>
+                <div
+                    className={tcls(
+                        'lg:!max-w-none mx-auto grid max-w-3xl site-width-wide:max-w-screen-2xl justify-between gap-12',
+                        'grid-cols-[auto_auto]',
+                        'lg:grid-cols-[18rem_minmax(auto,_48rem)_auto]',
+                        'xl:grid-cols-[18rem_minmax(auto,_48rem)_14rem]',
+                        'site-width-wide:lg:grid-cols-[18rem_minmax(auto,_80rem)_auto]',
+                        'site-width-wide:xl:grid-cols-[18rem_minmax(auto,_80rem)_14rem]',
+                        'page-no-toc:lg:grid-cols-[minmax(auto,_48rem)_auto]',
+                        'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]',
+                        '[body:has(.site-width-wide,.page-no-toc)_&]:lg:grid-cols-[minmax(auto,_90rem)_auto]',
+                        '[body:has(.site-width-wide,.page-no-toc)_&]:xl:grid-cols-[14rem_minmax(auto,_90rem)_14rem]'
+                    )}
+                >
+                    {
+                        // Footer Logo
+                        customization.footer.logo ? (
+                            <div className="col-start-1 row-start-1">
+                                <Image
+                                    alt="Logo"
+                                    resize={context.imageResizer}
+                                    sources={{
+                                        light: {
+                                            src: customization.footer.logo.light,
+                                        },
+                                        dark: customization.footer.logo.dark
+                                            ? {
+                                                  src: customization.footer.logo.dark,
+                                              }
+                                            : null,
+                                    }}
+                                    priority="lazy"
+                                    style={[
+                                        'w-auto',
+                                        'max-w-40',
+                                        'lg:max-w-64',
+                                        'max-h-10',
+                                        'lg:max-h-12',
+                                        'object-contain',
+                                        'object-left',
+                                        'rounded',
+                                        'straight-corners:rounded-sm',
+                                    ]}
+                                    sizes={[
+                                        {
+                                            width: 320,
+                                        },
+                                    ]}
+                                />
+                            </div>
+                        ) : null
+                    }
 
-                        {
-                            // Theme Toggle
-                            customization.themes.toggeable ? (
-                                <div className="-col-start-2 row-start-1 flex items-start justify-end xl:hidden">
-                                    <React.Suspense fallback={null}>
-                                        <ThemeToggler />
-                                    </React.Suspense>
-                                </div>
-                            ) : null
-                        }
+                    {
+                        // Theme Toggle
+                        customization.themes.toggeable ? (
+                            <div className="-col-start-2 row-start-1 flex items-start justify-end xl:hidden">
+                                <React.Suspense fallback={null}>
+                                    <ThemeToggler />
+                                </React.Suspense>
+                            </div>
+                        ) : null
+                    }
 
-                        {
-                            // Navigation groups (split into equal columns)
-                            customization.footer.groups?.length > 0 ? (
-                                <div
-                                    className={tcls(
-                                        'col-span-2 page-has-toc:lg:col-span-1 page-has-toc:lg:col-start-2 page-no-toc:xl:col-span-1 page-no-toc:xl:col-start-2'
+                    {
+                        // Navigation groups (split into equal columns)
+                        customization.footer.groups?.length > 0 ? (
+                            <div
+                                className={tcls(
+                                    'col-span-2 page-has-toc:lg:col-span-1 page-has-toc:lg:col-start-2 page-no-toc:xl:col-span-1 page-no-toc:xl:col-start-2'
+                                )}
+                            >
+                                <div className="mx-auto flex max-w-3xl site-width-wide:max-w-screen-2xl flex-col gap-10 sm:flex-row sm:gap-6">
+                                    {partition(customization.footer.groups, FOOTER_COLUMNS).map(
+                                        (column, columnIndex) => (
+                                            <div
+                                                key={columnIndex}
+                                                className="flex flex-1 grow flex-col gap-10"
+                                            >
+                                                {column.map((group, groupIndex) => (
+                                                    <FooterLinksGroup
+                                                        key={groupIndex}
+                                                        group={group}
+                                                        context={context}
+                                                    />
+                                                ))}
+                                            </div>
+                                        )
                                     )}
-                                >
-                                    <div className="mx-auto flex max-w-3xl site-width-wide:max-w-screen-2xl flex-col gap-10 sm:flex-row sm:gap-6">
-                                        {partition(customization.footer.groups, FOOTER_COLUMNS).map(
-                                            (column, columnIndex) => (
-                                                <div
-                                                    key={columnIndex}
-                                                    className="flex flex-1 grow flex-col gap-10"
-                                                >
-                                                    {column.map((group, groupIndex) => (
-                                                        <FooterLinksGroup
-                                                            key={groupIndex}
-                                                            group={group}
-                                                            context={context}
-                                                        />
-                                                    ))}
-                                                </div>
-                                            )
-                                        )}
-                                    </div>
                                 </div>
-                            ) : null
-                        }
+                            </div>
+                        ) : null
+                    }
 
-                        {
-                            // Legal
-                            customization.footer.copyright ? (
-                                <div className="order-last col-span-full flex w-full grow flex-col items-center gap-2 text-center text-tint text-xs">
-                                    <p>{customization.footer.copyright}</p>
-                                </div>
-                            ) : null
-                        }
-                    </div>
+                    {
+                        // Legal
+                        customization.footer.copyright ? (
+                            <div className="order-last col-span-full flex w-full grow flex-col items-center gap-2 text-center text-tint text-xs">
+                                <p>{customization.footer.copyright}</p>
+                            </div>
+                        ) : null
+                    }
                 </div>
             </div>
         </footer>
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index abc24f53f8..763c82792f 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -56,136 +56,132 @@ export function Header(props: {
                     'theme-bold:shadow-tint-12/2'
                 )}
             >
-                <div className="scroll-nojump">
-                    <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                    <div
+                        className={tcls(
+                            'gap-4',
+                            'lg:gap-6',
+                            'flex',
+                            'items-center',
+                            'justify-between',
+                            'w-full',
+                            'py-3',
+                            'min-h-16',
+                            'sm:h-16',
+                            CONTAINER_STYLE
+                        )}
+                    >
                         <div
                             className={tcls(
-                                'gap-4',
-                                'lg:gap-6',
-                                'flex',
-                                'items-center',
-                                'justify-between',
-                                'w-full',
-                                'py-3',
-                                'min-h-16',
-                                'sm:h-16',
-                                CONTAINER_STYLE
+                                'flex max-w-full lg:basis-72',
+                                'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
                             )}
                         >
-                            <div
+                            <HeaderMobileMenu
                                 className={tcls(
-                                    'flex max-w-full lg:basis-72',
-                                    'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
+                                    'lg:hidden',
+                                    '-ml-2',
+                                    'text-tint-strong',
+                                    'theme-bold:text-header-link',
+                                    'hover:bg-tint-hover',
+                                    'theme-bold:hover:bg-header-link/3',
+                                    'page-no-toc:hidden'
                                 )}
-                            >
-                                <HeaderMobileMenu
-                                    className={tcls(
-                                        'lg:hidden',
-                                        '-ml-2',
-                                        'text-tint-strong',
-                                        'theme-bold:text-header-link',
-                                        'hover:bg-tint-hover',
-                                        'theme-bold:hover:bg-header-link/3',
-                                        'page-no-toc:hidden'
-                                    )}
-                                />
-                                <HeaderLogo context={context} />
-                            </div>
-
-                            <div
-                                className={tcls(
-                                    'flex',
-                                    'grow-0',
-                                    'shrink-0',
-                                    'md:basis-56',
-                                    'justify-self-end',
-                                    'items-center',
-                                    'gap-2',
-                                    'search' in customization.styling &&
-                                        customization.styling.search === 'prominent'
-                                        ? [
-                                              'md:grow-[0.8]',
-                                              'lg:basis-40',
-                                              'md:max-w-[40%]',
-                                              'lg:max-w-lg',
-                                              'lg:ml-[max(calc((100%-18rem-48rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem)
-                                              'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem)
-                                              'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]',
-                                              'md:mr-auto',
-                                              'order-last',
-                                              'md:order-[unset]',
-                                          ]
-                                        : ['order-last']
-                                )}
-                            >
-                                {search}
-                            </div>
+                            />
+                            <HeaderLogo context={context} />
+                        </div>
 
-                            {customization.header.links.length > 0 && (
-                                <HeaderLinks>
-                                    {customization.header.links.map((link) => {
-                                        return (
-                                            <HeaderLink
-                                                key={link.title}
-                                                link={link}
-                                                context={context}
-                                            />
-                                        );
-                                    })}
-                                    <HeaderLinkMore
-                                        label={t(getSpaceLanguage(customization), 'more')}
-                                        links={customization.header.links}
-                                        context={context}
-                                    />
-                                </HeaderLinks>
+                        <div
+                            className={tcls(
+                                'flex',
+                                'grow-0',
+                                'shrink-0',
+                                'md:basis-56',
+                                'justify-self-end',
+                                'items-center',
+                                'gap-2',
+                                'search' in customization.styling &&
+                                    customization.styling.search === 'prominent'
+                                    ? [
+                                          'md:grow-[0.8]',
+                                          'lg:basis-40',
+                                          'md:max-w-[40%]',
+                                          'lg:max-w-lg',
+                                          'lg:ml-[max(calc((100%-18rem-48rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem)
+                                          'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem)
+                                          'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]',
+                                          'md:mr-auto',
+                                          'order-last',
+                                          'md:order-[unset]',
+                                      ]
+                                    : ['order-last']
                             )}
+                        >
+                            {search}
                         </div>
+
+                        {customization.header.links.length > 0 && (
+                            <HeaderLinks>
+                                {customization.header.links.map((link) => {
+                                    return (
+                                        <HeaderLink
+                                            key={link.title}
+                                            link={link}
+                                            context={context}
+                                        />
+                                    );
+                                })}
+                                <HeaderLinkMore
+                                    label={t(getSpaceLanguage(customization), 'more')}
+                                    links={customization.header.links}
+                                    context={context}
+                                />
+                            </HeaderLinks>
+                        )}
                     </div>
                 </div>
             </div>
 
             {sections || siteSpaces.length > 1 ? (
-                <div className="scroll-nojump">
-                    <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                    <div
+                        className={tcls(
+                            'w-full',
+                            'overflow-x-auto',
+                            'no-scrollbar',
+                            '-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'
+                        )}
+                    >
                         <div
                             className={tcls(
-                                'w-full',
-                                'overflow-x-auto',
-                                'no-scrollbar',
-                                '-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'
+                                CONTAINER_STYLE,
+                                'grow',
+                                'flex',
+                                'items-end',
+                                'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
                             )}
                         >
-                            <div
-                                className={tcls(
-                                    CONTAINER_STYLE,
-                                    'grow',
-                                    'flex',
-                                    'items-end',
-                                    'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
-                                )}
-                            >
-                                {siteSpaces.length > 1 && (
-                                    <div
-                                        id="variants"
-                                        className="my-2 mr-5 grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
-                                    >
-                                        <SpacesDropdown
-                                            context={context}
-                                            siteSpace={siteSpace}
-                                            siteSpaces={siteSpaces}
-                                            className="w-full grow py-1"
-                                        />
-                                    </div>
+                            {siteSpaces.length > 1 && (
+                                <div
+                                    id="variants"
+                                    className="my-2 mr-5 grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
+                                >
+                                    <SpacesDropdown
+                                        context={context}
+                                        siteSpace={siteSpace}
+                                        siteSpaces={siteSpaces}
+                                        className="w-full grow py-1"
+                                    />
+                                </div>
+                            )}
+                            {sections &&
+                                (sections.list.some((s) => s.object === 'site-section-group') || // If there's even a single group, show the tabs
+                                    sections.list.length > 1) && ( // Otherwise, show the tabs if there's more than one section
+                                    <SiteSectionTabs
+                                        sections={encodeClientSiteSections(context, sections)}
+                                    />
                                 )}
-                                {sections &&
-                                    (sections.list.some((s) => s.object === 'site-section-group') || // If there's even a single group, show the tabs
-                                        sections.list.length > 1) && ( // Otherwise, show the tabs if there's more than one section
-                                        <SiteSectionTabs
-                                            sections={encodeClientSiteSections(context, sections)}
-                                        />
-                                    )}
-                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index 9bff7fc6c0..cb94319990 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -4,9 +4,12 @@
 
 @layer base {
     :root {
-        --scrollbar-width: calc(100vw - 100%);
         @apply leading-relaxed;
     }
+    * {
+        scrollbar-color: theme("colors.tint.7") theme("colors.tint.2");
+        scrollbar-width: thin;
+    }
     body {
         @apply text-tint-strong antialiased;
     }
@@ -37,22 +40,6 @@
         @apply subpixel-antialiased;
     }
 
-    /*  Light mode */
-    ::-webkit-scrollbar {
-        @apply bg-tint-subtle;
-        width: 8px;
-        height: 8px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        @apply bg-tint-7;
-        border-radius: 8px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-        @apply bg-tint-8;
-    }
-
     .flip-heading-hash {
         @apply [&:is(h1,h2,h3,h4)]:flex-row-reverse;
         @apply [&:is(h1,h2,h3,h4)]:[justify-content:start];
@@ -118,23 +105,6 @@
         @apply bg-gradient-to-bl from-tint-4 to-tint-base to-60% bg-fixed;
     }
 
-    /**
-     * Utility to prevent horizontal jumps when the vertical scrollbar appears
-     * It should be used on main containers of the layout, while preserving horizontal delimiters.
-     * It basically adds a margin-left with the width of the scrollbar, and a width that compensates for it; when a scrollbar is displayed.
-     * Inspired by https://aykevl.nl/2014/09/fix-jumping-scrollbar, but adapted to work on child elements of "html"
-     */
-    .scroll-nojump {
-        width: 100%;
-    }
-    @media screen and (min-width: 1536px) {
-        .scroll-nojump {
-            margin-left: var(--scrollbar-width);
-            margin-right: 0;
-            width: calc(100% - var(--scrollbar-width));
-        }
-    }
-
     .elevate-link {
         & a[href]:not(.link-overlay) {
             position: relative;
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index f57aec64cd..095a5febad 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -89,70 +89,69 @@ export function SpaceLayout(props: {
                     {aiMode === CustomizationAIMode.Assistant ? (
                         <AIChat trademark={customization.trademark.enabled} />
                     ) : null}
-                    <div className="scroll-nojump">
-                        <div className="motion-safe:transition-all motion-safe:duration-300 lg:chat-open:mr-80 xl:chat-open:mr-96">
-                            <div
-                                className={tcls(
-                                    'flex',
-                                    'flex-col',
-                                    'lg:flex-row',
-                                    CONTAINER_STYLE,
-                                    'site-width-wide:max-w-full',
 
-                                    // Ensure the footer is display below the viewport even if the content is not enough
-                                    withFooter && 'min-h-[calc(100vh-64px)]',
-                                    withTopHeader ? null : 'lg:min-h-screen'
-                                )}
-                            >
-                                <TableOfContents
-                                    context={context}
-                                    header={
-                                        withTopHeader ? null : (
-                                            <div
+                    <div className="motion-safe:transition-all motion-safe:duration-300 lg:chat-open:mr-80 xl:chat-open:mr-96">
+                        <div
+                            className={tcls(
+                                'flex',
+                                'flex-col',
+                                'lg:flex-row',
+                                CONTAINER_STYLE,
+                                'site-width-wide:max-w-full',
+
+                                // Ensure the footer is display below the viewport even if the content is not enough
+                                withFooter && 'min-h-[calc(100vh-64px)]',
+                                withTopHeader ? null : 'lg:min-h-screen'
+                            )}
+                        >
+                            <TableOfContents
+                                context={context}
+                                header={
+                                    withTopHeader ? null : (
+                                        <div
+                                            className={tcls(
+                                                'hidden',
+                                                'pr-4',
+                                                'md:flex',
+                                                'grow-0',
+                                                'flex-wrap',
+                                                'dark:shadow-light/1',
+                                                'text-base/tight'
+                                            )}
+                                        >
+                                            <HeaderLogo context={context} />
+                                        </div>
+                                    )
+                                }
+                                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.
+                                    <>
+                                        {!withTopHeader && searchAndAI}
+                                        {!withTopHeader && withSections && sections && (
+                                            <SiteSectionList
+                                                className={tcls('hidden', 'lg:block')}
+                                                sections={encodeClientSiteSections(
+                                                    context,
+                                                    sections
+                                                )}
+                                            />
+                                        )}
+                                        {isMultiVariants && !sections && (
+                                            <SpacesDropdown
+                                                context={context}
+                                                siteSpace={siteSpace}
+                                                siteSpaces={siteSpaces}
                                                 className={tcls(
-                                                    'hidden',
-                                                    'pr-4',
-                                                    'md:flex',
-                                                    'grow-0',
-                                                    'flex-wrap',
-                                                    'dark:shadow-light/1',
-                                                    'text-base/tight'
+                                                    'w-full',
+                                                    'page-no-toc:hidden',
+                                                    'site-header-none:page-no-toc:flex'
                                                 )}
-                                            >
-                                                <HeaderLogo context={context} />
-                                            </div>
-                                        )
-                                    }
-                                    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.
-                                        <>
-                                            {!withTopHeader && searchAndAI}
-                                            {!withTopHeader && withSections && sections && (
-                                                <SiteSectionList
-                                                    className={tcls('hidden', 'lg:block')}
-                                                    sections={encodeClientSiteSections(
-                                                        context,
-                                                        sections
-                                                    )}
-                                                />
-                                            )}
-                                            {isMultiVariants && !sections && (
-                                                <SpacesDropdown
-                                                    context={context}
-                                                    siteSpace={siteSpace}
-                                                    siteSpaces={siteSpaces}
-                                                    className={tcls(
-                                                        'w-full',
-                                                        'page-no-toc:hidden',
-                                                        'site-header-none:page-no-toc:flex'
-                                                    )}
-                                                />
-                                            )}
-                                        </>
-                                    }
-                                />
-                                <div className="flex min-w-0 flex-1 flex-col">{children}</div>
-                            </div>
+                                            />
+                                        )}
+                                    </>
+                                }
+                            />
+                            <div className="flex min-w-0 flex-1 flex-col">{children}</div>
                         </div>
                     </div>