From 93fda3634d2dfc4a7acc94d35eaf23f649b88ece Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 11 Oct 2023 14:32:57 -0400
Subject: [PATCH] Add scroll style

---
 .../components/common/dropdown-scrollable.tsx   | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/scripts/components/common/dropdown-scrollable.tsx b/app/scripts/components/common/dropdown-scrollable.tsx
index 08ea72a36..c80a2fe4e 100644
--- a/app/scripts/components/common/dropdown-scrollable.tsx
+++ b/app/scripts/components/common/dropdown-scrollable.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
-import { glsp } from '@devseed-ui/theme-provider';
+import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import {
   Dropdown,
   DropdownProps,
@@ -16,8 +16,21 @@ const DropdownWithScroll = styled(Dropdown)`
   padding: 0;
   overflow: hidden;
   max-height: 320px;
-  overflow-y: auto;
   overscroll-behavior: none;
+  overflow-y: scroll;
+
+  /* Scroll style firefox */
+  scrollbar-color: ${themeVal('color.base-100')} transparent;
+  
+  /* Scroll style for webkit - chrome, safari */
+  &::-webkit-scrollbar {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${themeVal('color.base-100')};
+    border-radius: ${themeVal('shape.rounded')}
+  }
 
   ${DropTitle} {
     margin: 0;