fix: show scrollbar on overflow (#2061)

* fix: show scrollbar on overflow * chore: put CSS back in the JSX file
tijlleenders · Oct 16, 2024 · 6aa3da5 · 6aa3da5
1 parent 121e49d
commit 6aa3da5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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>