style: custom scrollbar UI for better visual consistency (#1553)#1555
Conversation
Added custom scrollbar styles for light and dark themes, including hover effects and Firefox fallbacks.
|
@Papia-tech is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
✅ Synchronized metadata from Issue #1553:
|
|
@Papia-tech it is a good practice to attached the screenshots when there is UI changes for a better review . |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@Papia-tech i see the scroll bar is disappeared . you can check the vercel preview |
Thanks for catching that! Setting the track background to transparent was causing it to clip and disappear. I'm unable to verify the Vercel link directly because it gives me an "Access Required" screen @sanjay-kv @Adez017 |
Updated scrollbar styles for light and dark themes with improved visibility and contrast.
|
✅ Synchronized metadata from Issue #1553:
|
you can check the changes with local build @Papia-tech |
Updated scrollbar styles for light and dark themes, adjusting dimensions and colors for better visibility.
|
I have corrected the scrollbar design, and it is now displaying properly on my localhost. Screenshot attached. Screen.Recording.2026-05-18.155418.mp4 |
|
✅ Synchronized metadata from Issue #1553:
|
@Papia-tech while switching the theme the cards went into an unexpected dual color behavior. |
@Papia-tech and what's the difference we can scroll the cards before hand also , i don't find any value with this PR . |
Hi @Adez017, the dual-color footer issue is actually a pre-existing issue on the main branch and was not introduced by this PR. |
|
@Papia-tech but i didn't able to detect how you had enhanced the scrollbar |
|
@Adez017, the scrollbar enhancement is mainly visible on desktop/tablet views, as custom scrollbar styling may not appear consistently on mobile browsers. |
can you attach a video with both before changes and after changes? |
|
@Adez017 i found the changes, basically a smaller scrollbar |
Added custom scrollbar styles for light and dark themes, including hover effects and Firefox fallbacks.
Description
This PR introduces a custom, slim, and modern scrollbar UI for the application to improve overall visual consistency across different pages. The new scrollbar dynamically adapts to both light and dark themes, featuring fully rounded edges and interactive hover states that match the platform's primary accent colors. It also includes comprehensive cross-browser fallbacks to ensure a uniform user experience on Chrome, Safari, Edge, and Firefox.
Fixes #1553
Type of Change
Changes Made
8pxvertical /10pxhorizontal) for Webkit-based browsers.scrollbar-widthandscrollbar-colorproperties mapping directly to the theme configurations for parity in Firefox.custom.cssto prevent style breakdown.Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.