Merge pull request #533 from riyanshigupta890-cloud/feature/activity-scrollbar-518

Feature/activity scrollbar 518

Author: indresh404

package-lock.json

@@ -40,6 +40,7 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
     "postcss": "^8.5.15",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.19",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",

package.json

@@ -29,8 +29,7 @@ export const ActivityFeed = () => {
       </div>
 
       {/* Timeline items */}
-      <div className="flex-1 mt-6 relative pl-6 space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-slate-200 dark:before:bg-slate-800 overflow-y-auto max-h-[350px] scrollbar-none">
-        <motion.div
+        <div className="flex-1 mt-6 relative pl-6 pr-2 space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-slate-200 dark:before:bg-slate-800 overflow-y-auto max-h-[350px] scrollbar-thin scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-700 scrollbar-track-transparent">        <motion.div
           variants={staggerContainer(0.08, 0.05)}
           initial="hidden"
           animate="visible"

src/components/dashboard/ActivityFeed.jsx

@@ -1,3 +1,5 @@
+import tailwindScrollbar from 'tailwind-scrollbar';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -29,8 +31,10 @@ export default {
           '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
           '100%': { transform: 'translate(0px, 0px) scale(1)' },
         }
-      }
-    },
+      },
+    }
   },
-  plugins: [],
+  plugins: [
+    tailwindScrollbar,
+  ],
 }