scrollable filebar

src/components/TopBar.tsx

@@ -25,7 +25,7 @@ function TopBar() {
   }
 
   return (
-    <div className="flex flex-row bg-slate-700">
+    <div className="flex flex-row bg-slate-700 overflow-x-auto overflow-y-hidden scrollbar-thin">
       {files.map((file) => (
         <FileTab
           key={file.filePath}

src/index.css

@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* scrollbar.css */
+
+@layer utilities {
+
+    /* Width of the horizontal scrollbar */
+    .scrollbar-thin::-webkit-scrollbar {
+        height: 5px;
+    }
+
+    /* Background color of the horizontal scrollbar track */
+    .scrollbar-thin::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    /* Color of the horizontal scrollbar thumb */
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+        background: #888;
+    }
+
+    /* Firefox horizontal scrollbar width */
+    .scrollbar-thin {
+        scrollbar-height: thin;
+    }
+
+    /* Firefox horizontal scrollbar track color */
+    .scrollbar-thin *::-moz-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    /* Firefox horizontal scrollbar thumb color */
+    .scrollbar-thin *::-moz-scrollbar-thumb {
+        background: #888;
+    }
+}