From 098e9c5fb912f0204b76f22e1946e4e71aa2710a Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Thu, 17 Sep 2026 21:43:25 +0200
Subject: [PATCH] refactor(scrollbars): consolidate and simplify global
 scrollbar styles

Move and consolidate scrollbar styling into a single block at the end of app.css.
Remove the scattered top-level rule and the left-sidebar-specific overrides and
replace them with a unified set of rules that use ::-webkit-scrollbar pseudo-
elements and reset scrollbar-width/color to auto so WebKit styling wins.

- Set WebKit scrollbar size to 8px, rounded thumb with min-height/border and
  color-mix background.
- Unify hover/active thumb colors to use --app-scrollbar-thumb and
  --app-scrollbar-thumb-hover.
- Keep hidden scrollbars for .repo-tabs-scroll.
---
 src/app.css | 55 ++++++++++++++++++-----------------------------------
 1 file changed, 19 insertions(+), 36 deletions(-)

diff --git a/src/app.css b/src/app.css
index 5ebcbeb..b2da4c9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -141,11 +141,7 @@
 
   html, body, #app { width: 100%; height: 100%; margin: 0; }
 
-  * { scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb) transparent; }
-  ::-webkit-scrollbar { width: 5px; height: 5px; }
-  ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb); border-radius: 3px; }
-  ::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); }
+  /* Scrollbars are styled app-wide at the end of this file. */
 
   html { color-scheme: var(--app-color-scheme); }
   body {
@@ -9255,41 +9251,28 @@ section > header.page-header.page-header {
 .left-sidebar .tags-panel .tag-create-form input[aria-label="Tag message"] { grid-column: 2 / -1; grid-row: 2; }
 
 
-/* --- Sidebar scrollbars ---------------------------------------------------
-   Slim, rounded thumb that brightens while hovering a scroll area.
-   scrollbar-width/color are reset so WebKit uses the pseudo-element styling.
-   The panel lists are named explicitly so they win over any other rule. */
-.left-sidebar,
-.left-sidebar *,
-.left-sidebar .sidebar-tags-list,
-.left-sidebar .sidebar-worktree-list,
-.left-sidebar .stash-list,
-.left-sidebar .explorer-list {
-  scrollbar-width: auto !important;
-  scrollbar-color: auto !important;
+/* --- Scrollbars -----------------------------------------------------------
+   One look everywhere: a slim, rounded thumb that brightens while the pointer
+   is over the scrolling area. scrollbar-width/color are reset to auto so
+   WebKit uses the pseudo-element styling below instead of the native bar. */
+:root,
+* {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
 }
-.left-sidebar ::-webkit-scrollbar,
-.left-sidebar .sidebar-tags-list::-webkit-scrollbar,
-.left-sidebar .sidebar-worktree-list::-webkit-scrollbar,
-.left-sidebar .stash-list::-webkit-scrollbar,
-.left-sidebar .explorer-list::-webkit-scrollbar { width: 8px !important; height: 8px !important; background: transparent; }
-.left-sidebar ::-webkit-scrollbar-track,
-.left-sidebar .sidebar-tags-list::-webkit-scrollbar-track,
-.left-sidebar .sidebar-worktree-list::-webkit-scrollbar-track,
-.left-sidebar .stash-list::-webkit-scrollbar-track,
-.left-sidebar .explorer-list::-webkit-scrollbar-track { margin: 6px 0; background: transparent; }
-.left-sidebar ::-webkit-scrollbar-corner { background: transparent; }
-.left-sidebar ::-webkit-scrollbar-thumb,
-.left-sidebar .sidebar-tags-list::-webkit-scrollbar-thumb,
-.left-sidebar .sidebar-worktree-list::-webkit-scrollbar-thumb,
-.left-sidebar .stash-list::-webkit-scrollbar-thumb,
-.left-sidebar .explorer-list::-webkit-scrollbar-thumb {
+::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
+::-webkit-scrollbar-track { margin: 6px 0; background: transparent; }
+::-webkit-scrollbar-corner { background: transparent; }
+::-webkit-scrollbar-thumb {
   min-height: 28px;
   border: 2px solid transparent;
   border-radius: 999px;
   background-clip: padding-box;
   background-color: color-mix(in srgb, var(--app-scrollbar-thumb) 55%, transparent);
 }
-.left-sidebar :hover::-webkit-scrollbar-thumb { background-color: var(--app-scrollbar-thumb); }
-.left-sidebar ::-webkit-scrollbar-thumb:hover,
-.left-sidebar ::-webkit-scrollbar-thumb:active { background-color: var(--app-scrollbar-thumb-hover); }
+:hover::-webkit-scrollbar-thumb { background-color: var(--app-scrollbar-thumb); }
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:active { background-color: var(--app-scrollbar-thumb-hover); }
+
+/* Tab strips keep their hidden scrollbars. */
+.repo-tabs-scroll { scrollbar-width: none; }