From 4d258687c0c0bc1f4d84b469975c9c51a59568a0 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Tue, 4 Apr 2023 14:33:56 +0800
Subject: [PATCH] style: scrollbar

---
 src/components/Menu/ChatHistoryList.tsx |  2 +-
 src/components/Menu/Menu.tsx            |  2 +-
 src/main.css                            | 23 +++++++++++++----------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Menu/ChatHistoryList.tsx b/src/components/Menu/ChatHistoryList.tsx
index d2de9c6..4502cd0 100644
--- a/src/components/Menu/ChatHistoryList.tsx
+++ b/src/components/Menu/ChatHistoryList.tsx
@@ -156,7 +156,7 @@ const ChatHistoryList = () => {
 
   return (
     <div
-      className={`flex-col flex-1 overflow-y-scroll -mr-2 border-b border-white/20 ${
+      className={`flex-col flex-1 overflow-y-auto hide-scroll-bar border-b border-white/20 ${
         isHover ? 'bg-gray-800/40' : ''
       }`}
       onDrop={handleDrop}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index f74a897..4feed78 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -36,7 +36,7 @@ const Menu = () => {
         }`}
       >
         <div className='flex h-full min-h-0 flex-col'>
-          <div className='scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20'>
+          <div className='flex h-full w-full flex-1 items-start border-white/20'>
             <nav className='flex h-full flex-1 flex-col space-y-1 p-2'>
               <NewChat />
               <ChatHistoryList />
diff --git a/src/main.css b/src/main.css
index b8301c9..49c063b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -79,11 +79,6 @@
     height: 1rem;
     width: 0.5rem;
   }
-  @media screen and (min-width: 768px) {
-    .scrollbar-trigger ::-webkit-scrollbar-thumb {
-      visibility: hidden;
-    }
-  }
 
   @media screen and (max-width: 768px) {
     ::-webkit-scrollbar {
@@ -97,11 +92,6 @@
     scrollbar-width: none; /* Firefox */
   }
 
-  .dark::-webkit-scrollbar-thumb {
-    --tw-bg-opacity: 1;
-    background-color: rgba(86, 88, 105, var(--tw-bg-opacity));
-  }
-
   ::-webkit-scrollbar-thumb {
     --tw-border-opacity: 1;
     background-color: rgba(217, 217, 227, 0.8);
@@ -110,6 +100,19 @@
     border-width: 1px;
   }
 
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(217, 217, 227, 0.6);
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    --tw-bg-opacity: 1;
+    background-color: rgba(86, 88, 105, var(--tw-bg-opacity));
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(217, 217, 227, 0.8);
+  }
+
   ::-webkit-scrollbar-track {
     background-color: transparent;
     border-radius: 9999px;