Fix: Scrollbar shifts main content

JoinColony · Oct 30, 2024 · d3ed3d0 · d3ed3d0
1 parent 5fbfbf9
commit d3ed3d0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/v5/frame/PageLayout/PageLayout.tsx b/src/components/v5/frame/PageLayout/PageLayout.tsx
@@ -66,7 +66,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
             </section>
             <section
               className={clsx(
-                'modal-blur h-full w-full overflow-auto px-6 md:p-8 md:pb-0 md:pt-2',
+                'modal-blur h-full w-full overflow-auto px-6 scrollbar-gutter-stable md:p-8 md:pb-0 md:pt-2',
                 {
                   'md:!pt-[1.125rem]': !pageTitle,
                 },

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -270,10 +270,13 @@ module.exports = {
         '.no-scrollbar::-webkit-scrollbar': {
           display: 'none',
         },
+        '.scrollbar-gutter-stable': {
+          'scrollbar-gutter': 'stable',
+        },
         '.bold-on-hover': {
           '@apply relative after:w-full after:h-4.5 after:z-base after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:overflow-hidden after:text-gray-700 hover:after:text-gray-900 after:font-medium hover:after:font-semibold after:content-[attr(aria-label)]':
             {},
-        }
+        },
       });
       addComponents({
         '.inner': {