From cf4066c6114259c6e5ccca153138bd1cc5bd0d0e Mon Sep 17 00:00:00 2001
From: rahul-rajak-nsut <rahulrajak.cs@gmail.com>
Date: Fri, 22 May 2026 02:44:33 +0530
Subject: [PATCH 1/2] feat(ui): add custom slim scrollbar styling to dashboard
 widgets

- Install tailwind-scrollbar v3.1.0 plugin
- Add scrollbar-thin utility in globals.css with dark mode support
- Apply scrollbar-thin to BadgeSection, ContributionHeatmap, FriendComparison, NotificationBell

Closes #585
---
 package-lock.json                      | 15 +++++++++++++++
 package.json                           |  1 +
 src/app/globals.css                    | 11 +++++++++++
 src/components/BadgeSection.tsx        |  2 +-
 src/components/ContributionHeatmap.tsx |  2 +-
 src/components/FriendComparison.tsx    |  2 +-
 src/components/NotificationBell.tsx    |  2 +-
 tailwind.config.ts                     |  6 ++++--
 8 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ce0b55ff..a6f727d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8.4.38",
+        "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -5062,6 +5063,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -6270,6 +6272,19 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz",
+      "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
diff --git a/package.json b/package.json
index fd2359d8..5dfbb659 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8.4.38",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/src/app/globals.css b/src/app/globals.css
index d1d9f210..b2250568 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -45,3 +45,14 @@ body {
   color: var(--foreground);
   transition: background-color 200ms ease, color 200ms ease;
 }
+/* Custom slim scrollbar for dashboard widgets */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: #4b5563 transparent;
+}
+.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
+.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.scrollbar-thin::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 9999px; }
+.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #6b7280; }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #6b7280; }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
\ No newline at end of file
diff --git a/src/components/BadgeSection.tsx b/src/components/BadgeSection.tsx
index d74f8a1a..e5c43eea 100644
--- a/src/components/BadgeSection.tsx
+++ b/src/components/BadgeSection.tsx
@@ -105,7 +105,7 @@ function CopyableCodeBlock({ code }: { code: string }) {
 
   return (
     <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-3 border border-[var(--border)]">
-      <code className="flex-1 text-xs text-[var(--card-foreground)] overflow-auto">
+      <code className="flex-1 text-xs text-[var(--card-foreground)] overflow-auto scrollbar-thin">
         {code}
       </code>
       <button
diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 8c81db44..d4dfe413 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -224,7 +224,7 @@ export default function ContributionHeatmap({
         </div>
       ) : (
         <>
-          <div className="overflow-x-auto pb-2">
+          <div className="overflow-x-auto pb-2  scrollbar-thin">
             <div className="mx-auto flex flex-col gap-1" style={{ width: `${totalGridWidth}px` }}>
               
               {/* MATHEMATICAL COORDINATE TIMELINE HEADER BANNER CONTAINER */}
diff --git a/src/components/FriendComparison.tsx b/src/components/FriendComparison.tsx
index 8387ce66..19e45756 100644
--- a/src/components/FriendComparison.tsx
+++ b/src/components/FriendComparison.tsx
@@ -124,7 +124,7 @@ export default function FriendComparison() {
 
       {friendData && myData && (
         <div className="space-y-4">
-          <div className="overflow-x-auto pb-2">
+          <div className="overflow-x-auto pb-2  scrollbar-thin">
             <div className="min-w-[400px]">
               <div className="flex justify-between items-center text-sm font-medium text-[var(--muted-foreground)] px-2 mb-4">
                 <div className="w-1/3 text-left">You ({myData.username})</div>
diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index 3b4f6226..edc01d8b 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -128,7 +128,7 @@ export default function NotificationBell() {
             )}
           </div>
 
-          <ul className="max-h-72 overflow-y-auto divide-y divide-[var(--border)]">
+          <ul className="max-h-72 overflow-y-auto divide-y divide-[var(--border)]  scrollbar-thin">
             {notifications.length === 0 ? (
               <li className="px-4 py-6 text-center text-sm text-[var(--muted-foreground)]">
                 No notifications yet
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3cb5aed7..8a345a8b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,7 +10,9 @@ const config: Config = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require("tailwind-scrollbar")({ nocompatible: true }),
+  ],
 };
 
-export default config;
+export default config;
\ No newline at end of file

From 08eda5035aeae20fb6669f21881fe256a00db04a Mon Sep 17 00:00:00 2001
From: rahul-rajak-nsut <rahulrajak.cs@gmail.com>
Date: Fri, 22 May 2026 15:26:02 +0530
Subject: [PATCH 2/2] fix(ui): replace hardcoded hex colors with CSS vars and
 add EOF newlines

---
 src/app/globals.css | 10 +++++-----
 tailwind.config.ts  |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index b2250568..2f5e19dc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,11 +48,11 @@ body {
 /* Custom slim scrollbar for dashboard widgets */
 .scrollbar-thin {
   scrollbar-width: thin;
-  scrollbar-color: #4b5563 transparent;
+  scrollbar-color: var(--muted-foreground) transparent;
 }
 .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
 .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
-.scrollbar-thin::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 9999px; }
-.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #6b7280; }
-.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #6b7280; }
-.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
\ No newline at end of file
+.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--muted-foreground); border-radius: 9999px; }
+.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--muted-foreground); }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8a345a8b..4557ee03 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,4 +15,4 @@ const config: Config = {
   ],
 };
 
-export default config;
\ No newline at end of file
+export default config;