From 86f723694f7dbdefde74927c37e61e93c35eeaf0 Mon Sep 17 00:00:00 2001
From: Roger <rogermoreta@gmail.com>
Date: Thu, 18 Apr 2024 23:40:23 +0200
Subject: [PATCH] Better UX in SidebarNav

When SidebarNav has all elements collapsed it shows always the scroll-y (due to overflow-y-scroll class).
If change it with overflow-y-auto it disappears when it is no needed
and to avoid changing width, also is added a style: scrollbar-gutter: stable;
---
 src/components/Layout/SidebarNav/SidebarNav.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 17127096035..29e6ae35dc8 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -34,9 +34,10 @@ export default function SidebarNav({
         'sticky top-0 lg:bottom-0 lg:h-[calc(100vh-4rem)] flex flex-col'
       )}>
       <div
-        className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark"
+        className="overflow-y-auto no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark"
         style={{
           overscrollBehavior: 'contain',
+          scrollbarGutter: 'stable',
         }}>
         <aside
           className={cn(