Implement custom scrollbar styles

[Papia-tech]

Related Issue

• Closes: 🚀 Feature: Enhance Scrollbar UI for Better Visual Consistency #344

---

Description

This PR introduces custom scrollbar styling to replace the default browser scrollbars. It implements a modern, minimalistic design featuring a transparent background track and a semi-transparent blue draggable thumb that matches the project's overall design aesthetic (specifically aligning with the flow-line elements).

---

How Has This Been Tested?

• Google Chrome (v125+): Verified that the scrollbar width is fixed to 8px, track background remains completely transparent, and the thumb responds to the :hover state by darkening.
• Mozilla Firefox (v126+): Verified that the thin layout and custom color properties render correctly.
• Dark Mode Compatibility: Tested against the body's background structure within @layer base to ensure transparency displays seamlessly across both light and dark theme variations.

---

Screenshots (if applicable)

Screen.Recording.2026-05-23.213358.mp4

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• Style
  • Refined scrollbar appearance with consistent styling, improved colors, and hover effects for a more polished user experience across all browsers.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	03540a4
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a11d203f14ffb0008c92139
😎 Deploy Preview	https://deploy-preview-462--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 70f69335-e27c-445e-8c06-e2b0690fa681

📥 Commits

Reviewing files that changed from the base of the PR and between 373dde2 and 03540a4.

📒 Files selected for processing (1)

• src/index.css

---

📝 Walkthrough

Walkthrough

Cross-browser scrollbar styling rules are added to src/index.css to customize scrollbar appearance in Firefox and WebKit-based browsers. The changes include thin scrollbar dimensions, transparent tracks, colored thumbs, and hover-state color overrides, aligning the scrollbar with the application's dark theme aesthetic.

Changes

Scrollbar Styling Enhancement

Layer / File(s)	Summary
Cross-browser scrollbar styling src/index.css	Firefox html scrollbar width and color rules combined with WebKit ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb pseudo-elements. Includes base thumb styling and hover color state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A scrollbar styled with care so fine,
Firefox and Webkit now align,
Thin thumbs in hues that softly glow,
Hover states steal the show!
The tracker's theme now flows just right, 🎨✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change in the pull request—implementing custom scrollbar styles.
Description check	✅ Passed	The description follows the template structure with all required sections completed: Related Issue, Description, Testing, Screenshots, and Type of Change.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #344: custom thin scrollbar styling with modern design, transparent track, colored thumb matching accent theme, and cross-browser/dark mode support.
Out of Scope Changes check	✅ Passed	The CSS changes are entirely focused on scrollbar styling as required by issue #344, with no unrelated or out-of-scope modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Papia-tech]

Hello @mehul-m-prajapati could you please review and merge this PR when you get time? Thank you!

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #462 has been merged! 🎉🎉