From b6262dc20fa1c3294fcd8af4e9282259991fdcf8 Mon Sep 17 00:00:00 2001
From: Constantin Rusu <constantinrusu21@gmail.com>
Date: Thu, 8 May 2025 10:36:33 +0100
Subject: [PATCH] added custom scrollbar

---
 src/components/game/ExpertMemo.css | 20 --------------------
 src/components/ui/dialog.tsx       |  2 +-
 src/index.css                      | 30 ++++++++++++++++++++++++++++++
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/game/ExpertMemo.css b/src/components/game/ExpertMemo.css
index 140d29b..828adbd 100644
--- a/src/components/game/ExpertMemo.css
+++ b/src/components/game/ExpertMemo.css
@@ -175,26 +175,6 @@
     display: none;
 }
 
-/* Custom scrollbar for WebKit browsers */
-.memo-body::-webkit-scrollbar {
-    width: 6px;
-}
-
-.memo-body::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
-}
-
-.memo-body::-webkit-scrollbar-thumb {
-    background-color: rgba(234, 179, 8, 0.3);
-    border-radius: 3px;
-}
-
-/* Show scrollbar on hover */
-.memo-body:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(234, 179, 8, 0.5);
-}
-
 /* Remove the old gradient and padding styles */
 .memo-body p {
     margin-bottom: 1.5rem;
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 4a51553..2e6e598 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
         ref={ref}
         className={cn(
           "fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2 sm:rounded-lg",
-          "max-h-[85vh] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent",
+          "max-h-[85vh] overflow-y-auto",
           className
         )}
         {...props}
diff --git a/src/index.css b/src/index.css
index bc8d8ba..fa6aa9d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -97,6 +97,36 @@
   }
 }
 
+/* Custom scrollbar styles */
+@layer utilities {
+  /* For WebKit browsers (Chrome, Safari, newer versions of Opera) */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(234, 179, 8, 0.3);
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(234, 179, 8, 0.6);
+  }
+
+  /* For Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(234, 179, 8, 0.3) rgba(0, 0, 0, 0.3);
+  }
+}
+
 /* Custom utility classes */
 .shadow-glow {
   box-shadow: 0 0 15px rgba(234, 179, 8, 0.3),