fix: scrollbar gutter shifting issue

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/(modules)/layout.tsx

@@ -16,7 +16,7 @@ const ModulesLayout = ({
       <SidebarProvider>
         <AppSidebar />
         <main className="flex flex-1 flex-col w-full h-screen overflow-hidden">
-          <div className="flex-1 overflow-auto [scrollbar-gutter:stable]">
+          <div className="scroll-stable flex-1 overflow-auto">
             <div className="max-w-380 mx-auto w-full flex flex-col min-h-full">
               <div className="flex gap-3 items-center sticky top-0 bg-background z-50 py-3 px-6 border-b border-border">
                 <SidebarTrigger />

src/app/globals.css

@@ -122,16 +122,12 @@
 }
 
 @layer base {
-  html {
-    scrollbar-gutter: stable;
-  }
-
   html:has(body[data-scroll-locked]) {
     scrollbar-gutter: auto;
   }
 
   @supports not (scrollbar-gutter: stable) {
-    html {
+    .scroll-stable {
       overflow-y: scroll;
     }
   }
@@ -143,4 +139,8 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  .scroll-stable {
+    scrollbar-gutter: stable;
+  }
 }