Merge pull request #110 from fac30/style/category-scroll

style: remove scrollbar from categories bar
fac30 · Dec 19, 2024 · c009743 · c009743
2 parents 956b5c3 + f6d7e46
commit c009743
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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 */
+  }
+}