feat: Replace default browser scrollbar with custom themed scrollbar

[thenabbu]

Summary

The website uses the default browser scrollbar which visually clashes with DevCard's
theme. A custom CSS scrollbar matching the site's color palette would improve
UI consistency and overall polish.

Context

On Chromium-based browsers, the default scrollbar is visually heavy and does not
blend with the dark/themed UI of DevCard. This is especially noticeable on the
DevCard profile view screen. A lightweight CSS-only fix using ::-webkit-scrollbar
pseudo-elements (Chromium/Safari) and scrollbar-color (Firefox) can resolve this
without any JavaScript.

Tasks

• Identify the theme accent colors / CSS variables from the existing Tailwind config or app.css
• Implement custom scrollbar styles in the global stylesheet
• Test appearance across different browsers

[thenabbu]

@Harxhit i would like to be assigned to this issue under GSSOC'26

[tech-dipesh]

/assign gssoc

[Sadik159]

Hi @thenabbu

I analyzed the scrollbar issue on the DevCard profile view and identified a clean CSS-only approach that can improve the overall UI consistency without adding any extra dependencies.

My approach would include:

• Inspecting the existing Tailwind theme variables and color tokens
• Implementing lightweight custom scrollbar styling using ::-webkit-scrollbar and scrollbar-color
• Matching the scrollbar with the current dark/glassmorphism UI
• Ensuring cross-browser compatibility for Chrome, Edge, Brave, Safari, and Firefox
• Keeping the implementation fully global and maintainable through existing theme variables

This looks like a low-risk UI enhancement with noticeable visual improvement, especially on profile/detail pages where scrolling is more visible.

I’d like to work on this issue if it can be assigned to me.