Simpler approach for better scrollbar design

[saeedvaziry]

Pull Request

A simpler approach for better scrollbar design

Description

This is simply using CSS to make the scrollbar look nicer on all platforms.

Screenshots/Videos

[saeedvaziry]

Light mode

[Copilot]

Pull request overview

This PR introduces global scrollbar styling using CSS to improve scrollbar appearance across all platforms. However, the implementation conflicts with existing scrollbar customizations in the codebase.

Key changes:

• Added global ::-webkit-scrollbar styles for consistent appearance
• Added .scrollbar-hide utility class to hide scrollbars

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This utility class duplicates existing functionality. The file already has .scrollbar-none (lines 531-540) and .scrollbar-hidden (lines 678-684) that serve the same purpose of hiding scrollbars. Consider removing this duplicate or consolidating with existing utilities to maintain consistency.

Suggested change

	scrollbar-width: none; /* Standard property (future-proofing) */
	}
	.scrollbar-hide::-webkit-scrollbar {
	display: none;
	}
	@apply scrollbar-none;
	}

[Copilot]

The class name .scrollbar-hide is inconsistent with existing naming conventions in the file. The existing utilities use .scrollbar-none and .scrollbar-hidden for hiding scrollbars. If this utility is kept, it should use a name consistent with the established pattern.

Suggested change

	/* Hide scrollbar utility */
	.scrollbar-hide {
	scrollbar-width: none; /* Standard property (future-proofing) */
	}
	.scrollbar-hide::-webkit-scrollbar {
	display: none;
	}

[Copilot]

These global scrollbar styles will override all existing scoped scrollbar customizations in the file, including .custom-scrollbar, .custom-scrollbar-thin, .custom-scrollbar-auto, .editor-scrollable, .tab-scroll-container, and textarea styles. This breaks the existing intentional design where different elements have different scrollbar appearances for specific UX purposes. Consider either removing these global styles or making them more specific to not conflict with existing patterns.

Suggested change

	/* Works on WebKit/Blink (Tauri on all platforms) */
	::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	}
	::-webkit-scrollbar-track {
	background: transparent;
	}
	::-webkit-scrollbar-thumb {
	background-color: rgba(100, 100, 100, 0.5);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
	}
	::-webkit-scrollbar-thumb:hover {
	/* Works on WebKit/Blink (Tauri on all platforms)
	Scoped as a utility to avoid overriding existing
	scrollbar customizations on specific components. */
	.scrollbar-default::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	}
	.scrollbar-default::-webkit-scrollbar-track {
	background: transparent;
	}
	.scrollbar-default::-webkit-scrollbar-thumb {
	background-color: rgba(100, 100, 100, 0.5);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
	}
	.scrollbar-default::-webkit-scrollbar-thumb:hover {

[mehmetozguldev]

LGTM