feat(ui): Add custom slim scrollbar styling to dashboard widgets

[rahul-rajak-nsut]

Summary

Adds custom slim scrollbar styling to all scrollable dashboard widgets using tailwind-scrollbar v3.1.0. Replaces the bulky OS-default scrollbar with a clean 6px pill-shaped thumb that works in both light and dark mode.
Closes #585

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Installed tailwind-scrollbar v3.1.0 (compatible with Tailwind v3)
• Added .scrollbar-thin utility in globals.css with dark mode support
• Applied scrollbar-thin to BadgeSection.tsx, ContributionHeatmap.tsx, FriendComparison.tsx, NotificationBell.tsx

How to Test

1. Run npm run dev and open http://localhost:3000
2. Scroll inside any dashboard widget (Contribution Heatmap, Friend Comparison, Notifications)
3. Verify scrollbar appears slim (6px) with rounded thumb
4. Toggle dark mode and verify thumb color adjusts

Screenshots (if UI change)

Slim scrollbar visible on all scrollable widgets in both light and dark mode

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@rahul-rajak-nsut is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Priyanshu-byte-coder]

Please fix before merging:

1. Missing EOF newlines — both changed files must end with \n
2. Hardcoded hex colors in CSS — replace with CSS vars:
   • #4b5563 → use var(--muted-foreground)
   • #6b7280 → use var(--muted-foreground)
   • #9ca3af → use var(--muted-foreground)

All colors must go through the CSS variable system to respect dark/light theming.

[rahul-rajak-nsut]

Hi @Priyanshu-byte-coder , I've addressed all the requested changes:

1. Replaced all hardcoded hex colors (#4b5563, #6b7280, #9ca3af) with var(--muted-foreground) CSS variable
2. Added EOF newlines to both globals.css and tailwind.config.ts

Ready for re-review!