From f6d7e46ad846f85b3cf6ea2457c2077d96ac6db4 Mon Sep 17 00:00:00 2001
From: Jack Casstles-Jones <jackcasstlesjones@gmail.com>
Date: Wed, 18 Dec 2024 22:12:55 +0000
Subject: [PATCH] style: remove scrollbar from categories bar

---
 src/app/toolkit/components/CategoriesBar.tsx |  3 +--
 src/styles/globals.css                       | 12 ++++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/toolkit/components/CategoriesBar.tsx b/src/app/toolkit/components/CategoriesBar.tsx
index f9fe6116..8acdd075 100644
--- a/src/app/toolkit/components/CategoriesBar.tsx
+++ b/src/app/toolkit/components/CategoriesBar.tsx
@@ -40,7 +40,6 @@ export default function CategoriesBar({
         setCategories(allCategories.map((cat: Category) => cat.name));
       } else {
         setCategories([]);
-
       }
     };
     fetchCategories();
@@ -68,7 +67,7 @@ export default function CategoriesBar({
       </div>
 
       {/* Scrollable Categories */}
-      <div className="flex overflow-x-auto whitespace-nowrap space-x-2 flex-grow">
+      <div className="flex overflow-x-auto whitespace-nowrap space-x-2 flex-grow no-scrollbar">
         <Button
           key={"All"}
           label={"All"}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index faa53ec4..c67c36e2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -22,3 +22,15 @@ p {
 .addToolInput {
   @apply w-full p-2 rounded bg-transparent text-white border-b border-gray-700 focus:outline-none focus:ring-2 focus:ring-twd-primary-purple;
 }
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}