Skip to content

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

Open
rahul-rajak-nsut wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
rahul-rajak-nsut:feat/issue-585-custom-scrollbar
Open

feat(ui): Add custom slim scrollbar styling to dashboard widgets#601
rahul-rajak-nsut wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
rahul-rajak-nsut:feat/issue-585-custom-scrollbar

Conversation

@rahul-rajak-nsut
Copy link
Copy Markdown

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

- 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 Priyanshu-byte-coder#585
@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

@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 github-actions Bot added gssoc26 GSSoC 2026 contribution type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature labels May 21, 2026
@github-actions
Copy link
Copy Markdown

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

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI Enhancement: Add custom scrollbar styling to dashboard widgets

1 participant