From fdbc8bf0ea341d4df298707527fb08a9772d009e Mon Sep 17 00:00:00 2001
From: Emmanuel-Develops <itakpeemma@gmail.com>
Date: Fri, 22 Nov 2024 11:16:43 +0100
Subject: [PATCH] fix: add scroller class and fix multi select stories options

---
 src/components/select/Select.stories.tsx | 39 ++++++++++++++++++++++
 src/styles/tailwind.css                  | 41 ++++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
index ea4a142..483c920 100644
--- a/src/components/select/Select.stories.tsx
+++ b/src/components/select/Select.stories.tsx
@@ -41,6 +41,42 @@ const testOptions = [
     value: "option-4",
     selected: false,
   },
+  {
+    label: "Option 5",
+    count: 50,
+    value: "option-5",
+    selected: false,
+  },
+  {
+    label: "Option 6",
+    count: 60,
+    value: "option-6",  
+    selected: false,
+  },
+  {
+    label: "Option 7",
+    count: 70,
+    value: "option-7",  
+    selected: false,
+  },
+  {
+    label: "Option 8",
+    count: 80,
+    value: "option-8",  
+    selected: false,
+  },
+  {
+    label: "Option 9",
+    count: 90,
+    value: "option-9",  
+    selected: false,
+  },
+  {
+    label: "Option 10",
+    count: 100,
+    value: "option-10",  
+    selected: false,
+  }
 ];
 
 export const UnModifiedSelect = (args: { colorMode: "light" | "dark" }) => {
@@ -87,6 +123,9 @@ export const UnModifiedSelect = (args: { colorMode: "light" | "dark" }) => {
             onOptionSelect={({ action, value, event }) => {
               markAsSelected(action, value, event);
             }}
+            styles={{
+              noResults: "text-red-500"
+            }}
           />
         </MultiSelect>
       </div>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 14ae139..742d8e5 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -45,6 +45,47 @@ html {
   scroll-behavior: smooth !important;
 }
 
+ /* custom scrollbar */
+ .scroller {
+  --scrollbar-color-thumb: #aaa;
+  --scrollbar-color-track: rgba(60, 60, 60, 0.05);
+  --scrollbar-width: auto;
+  --scrollbar-width-legacy: 10px;
+}
+
+.dark .scroller {
+  --scrollbar-color-thumb: #777;
+  --scrollbar-color-track: rgba(60, 60, 60, 0.1);
+}
+
+/* Modern browsers with `scrollbar-*` support */
+@supports (scrollbar-width: auto) {
+  .scroller {
+    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+    scrollbar-width: var(--scrollbar-width);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+@supports selector(::-webkit-scrollbar) {
+  .scroller::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+  .scroller::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scroller:hover::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color-thumb);
+  }
+  .scroller:hover::-webkit-scrollbar-track {
+    background: var(--scrollbar-color-track);
+  }
+  .scroller::-webkit-scrollbar {
+    max-width: var(--scrollbar-width-legacy);
+    max-height: var(--scrollbar-width-legacy);
+  }
+}
+
 .dark {
   --background: #1c1c1e;
   --hover-state: #2c2c2e;