From 6aa3da5b1735b515b699c6c1355cae1beedbcd92 Mon Sep 17 00:00:00 2001
From: Rupali Haldiya <78981177+rupali-codes@users.noreply.github.com>
Date: Wed, 16 Oct 2024 08:55:10 +0530
Subject: [PATCH] fix: show scrollbar on overflow (#2061)

* fix: show scrollbar on overflow

* chore: put CSS back in the JSX file
---
 src/global.scss           | 11 +++++++++++
 src/layouts/AppLayout.tsx |  7 +++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/global.scss b/src/global.scss
index f052e0a4a..3d62b2048 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -4,6 +4,17 @@ div::-webkit-scrollbar {
   display: none;
 }
 
+/* App Layout */
+.appLayout::-webkit-scrollbar {
+  display: block;
+  width: 8px;
+}
+
+.appLayout::-webkit-scrollbar-thumb {
+  background-color: rgba(140, 140, 140, 0.5);
+  border-radius: 4px;
+}
+
 img {
   width: 24px;
   height: 24px;
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 5f019be3e..72b382821 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -13,12 +13,15 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children, title, debounceSearch }
         maxWidth: 600,
         minWidth: 236,
         overflow: "scroll",
+        scrollBehavior: "smooth",
         width: "100%",
         marginTop: 60,
+        marginBottom: 7,
         height: "calc(100vh - 112px)",
-        position: "sticky",
-        paddingBottom: 150,
+        paddingBottom: 100,
+        zIndex: 0,
       }}
+      className="appLayout"
     >
       {children}
     </div>