🤖 Improve scrollbar appearance on Linux (#146)

Centralizes scrollbar styling and improves appearance on Linux, where
default browser scrollbars are ugly.

**Changes:**
- Created `src/styles/scrollbars.tsx` with global scrollbar styles
- Added scrollbar color CSS variables to maintain consistency with app
theme
- Removed duplicate scrollbar styles from 3 components (SecretsModal,
ProjectSidebar, GitStatusIndicator)
- Applied styles globally via `GlobalScrollbars` component in App.tsx

**Benefits:**
- Consistent scrollbar appearance across all scrollable areas
- Works on both WebKit-based browsers (Electron, Chrome) and Firefox
- Much better appearance on Linux compared to default browser scrollbars
- Single source of truth for scrollbar styling

_Generated with `cmux`_

Author: kylecarbs

src/App.tsx

@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { Global, css } from "@emotion/react";
 import { GlobalColors } from "./styles/colors";
 import { GlobalFonts } from "./styles/fonts";
+import { GlobalScrollbars } from "./styles/scrollbars";
 import type { ProjectConfig } from "./config";
 import type { WorkspaceSelection } from "./components/ProjectSidebar";
 import ProjectSidebar from "./components/ProjectSidebar";
@@ -462,6 +463,7 @@ function AppInner() {
     <>
       <GlobalColors />
       <GlobalFonts />
+      <GlobalScrollbars />
       <Global styles={globalStyles} />
       <AppContainer>
         <ProjectSidebar

src/components/GitStatusIndicator.tsx

@@ -50,24 +50,6 @@ const Tooltip = styled.div<{ show: boolean }>`
   transition:
     opacity 0.2s,
     visibility 0.2s;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #424242;
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #4e4e4e;
-  }
 `;
 
 const BranchHeader = styled.div`

src/components/ProjectSidebar.tsx

@@ -91,23 +91,6 @@ const CollapseButton = styled.button`
 const ProjectsList = styled.div`
   flex: 1;
   overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #424242;
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #4e4e4e;
-  }
 `;
 
 const EmptyState = styled.div`

src/components/SecretsModal.tsx

@@ -10,23 +10,6 @@ const SecretsList = styled.div`
   overflow-y: auto;
   margin-bottom: 16px;
   min-height: 200px;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #424242;
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #4e4e4e;
-  }
 `;
 
 const SecretsGrid = styled.div`

src/styles/colors.tsx

@@ -121,6 +121,11 @@ export const GlobalColors = () => (
         --color-input-text: hsl(0 0% 80%);
         --color-input-border: hsl(207 51% 59%); /* VS Code blue */
         --color-input-border-focus: hsl(193 91% 64%); /* Lighter blue on focus */
+
+        /* Scrollbar Colors */
+        --scrollbar-track: hsl(0 0% 18%);
+        --scrollbar-thumb: hsl(0 0% 32%);
+        --scrollbar-thumb-hover: hsl(0 0% 42%);
       }
     `}
   />

src/styles/scrollbars.tsx

@@ -0,0 +1,52 @@
+import { Global, css } from "@emotion/react";
+
+/**
+ * Global scrollbar styles for the application
+ *
+ * These styles provide consistent, attractive scrollbars across all platforms,
+ * especially improving the appearance on Linux which uses default browser scrollbars.
+ *
+ * Uses both webkit-scrollbar (Chrome/Edge/Electron) and the standard scrollbar properties
+ * for Firefox support.
+ */
+export const GlobalScrollbars = () => (
+  <Global
+    styles={css`
+      /* Set dark color scheme to force dark scrollbars on Chromium/Linux */
+      :root {
+        color-scheme: dark;
+      }
+
+      /* Firefox scrollbar styling */
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+      }
+
+      /* Webkit scrollbar styling (Chrome, Edge, Electron) */
+      ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        background: var(--scrollbar-track);
+      }
+
+      ::-webkit-scrollbar-track {
+        background: var(--scrollbar-track);
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-thumb);
+        border-radius: 5px;
+        border: 2px solid var(--scrollbar-track);
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background: var(--scrollbar-thumb-hover);
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: var(--scrollbar-track);
+      }
+    `}
+  />
+);