From 05508f124da7cae10073dbb765ac611aeaadd0a0 Mon Sep 17 00:00:00 2001
From: Brandon Sneed <brandon@redf.net>
Date: Sat, 8 Aug 2026 16:18:10 -0700
Subject: [PATCH] fix(ui): use native platform scrollbars instead of custom
 ::-webkit-scrollbar rules

---
 web-app/src/index.css | 65 +++++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/web-app/src/index.css b/web-app/src/index.css
index efc5ed09c..a721a3b59 100644
--- a/web-app/src/index.css
+++ b/web-app/src/index.css
@@ -187,34 +187,19 @@
     stroke-width: 2;
   }
 
-  /* Scrollbar styles */
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+  /*
+   * color-scheme must track the app's own theme class, not the OS,
+   * so native scrollbars and <select> dropdowns stay in sync with
+   * the UI regardless of the system appearance setting.
+   */
+  :root {
+    color-scheme: light;
   }
 
-  ::-webkit-scrollbar-track {
-    background: transparent;
+  :root.dark {
+    color-scheme: dark;
   }
 
-  ::-webkit-scrollbar-thumb {
-    background: oklch(0.708 0 0 / 30%);
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.708 0 0 / 50%);
-  }
-
-  .dark ::-webkit-scrollbar-thumb {
-    background: oklch(0.985 0 0 / 20%);
-  }
-
-  .dark ::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.985 0 0 / 35%);
-  }
-
-  /* Firefox scrollbar */
   * {
     scrollbar-width: thin;
     scrollbar-color: oklch(0.708 0 0 / 30%) transparent;
@@ -224,6 +209,38 @@
     scrollbar-color: oklch(0.985 0 0 / 20%) transparent;
   }
 
+  /* Fallback for engines that don't support scrollbar-color (e.g.
+   * older WebKitGTK or non-evergreen WebView2). Once ::-webkit-scrollbar
+   * is defined the browser opts out of native overlay scrollbars, so
+   * these rules only apply where the standards path isn't available. */
+  @supports not (scrollbar-color: auto) {
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: oklch(0.708 0 0 / 30%);
+      border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: oklch(0.708 0 0 / 50%);
+    }
+
+    .dark ::-webkit-scrollbar-thumb {
+      background: oklch(0.985 0 0 / 20%);
+    }
+
+    .dark ::-webkit-scrollbar-thumb:hover {
+      background: oklch(0.985 0 0 / 35%);
+    }
+  }
+
 }
 
 @layer base {