From b4d14705861ebea1a83afb9ffe595001d5715cf5 Mon Sep 17 00:00:00 2001
From: Mert <101130780+mertalev@users.noreply.github.com>
Date: Thu, 18 Jan 2024 22:30:48 -0500
Subject: [PATCH] fix(web): prevent layout change from scrollbar in admin
 setings (#6482)

stable scrollbar
---
 web/src/app.css                                        | 4 ++++
 web/src/lib/components/layouts/user-page-layout.svelte | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/app.css b/web/src/app.css
index 81b58580af..54cd03b89d 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -132,4 +132,8 @@ input:focus-visible {
     display: none;
     scrollbar-width: none;
   }
+
+  .scrollbar-stable {
+    scrollbar-gutter: stable both-edges;
+  }
 }
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 8e1a6ebe75..e95258127f 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -42,7 +42,7 @@
       </div>
     {/if}
 
-    <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto">
+    <div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
       <slot />
     </div>
   </section>