From 012e066697d2188084cb00f48f1aad407269a9a1 Mon Sep 17 00:00:00 2001
From: CJ Pais <cj@cjpais.com>
Date: Wed, 18 Mar 2026 20:26:02 +0800
Subject: [PATCH] better scrollbars on macos

---
 src/App.css  | 15 ++++++++++-----
 src/main.tsx |  4 ++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index 44b0589..2aed759 100644
--- a/src/App.css
+++ b/src/App.css
@@ -62,17 +62,22 @@
   }
 }
 
-/* Custom Scrollbar */
-::-webkit-scrollbar {
+/* macOS - tint native overlay scrollbar thumb */
+:root[data-platform="macos"] {
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+
+/* Custom Scrollbar - only on Windows/Linux; macOS uses native overlay scrollbars */
+:root:not([data-platform="macos"]) ::-webkit-scrollbar {
   width: 14px;
   height: 14px;
 }
 
-::-webkit-scrollbar-track {
+:root:not([data-platform="macos"]) ::-webkit-scrollbar-track {
   background: transparent;
 }
 
-::-webkit-scrollbar-thumb {
+:root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb);
   border-radius: 20px;
   border: 3px solid transparent;
@@ -82,7 +87,7 @@
   min-height: 32px;
 }
 
-::-webkit-scrollbar-thumb:hover {
+:root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover);
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index c31c1e9..1e83ae7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { platform } from "@tauri-apps/plugin-os";
 import App from "./App";
 
+// Set platform before render so CSS can scope per-platform (e.g. scrollbar styles)
+document.documentElement.dataset.platform = platform();
+
 // Initialize i18n
 import "./i18n";