From 1b309316158b0f9ba20dc9c59fd95da140ce7362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 20 Nov 2025 12:37:16 +0100
Subject: [PATCH] style: add custom-scrollbar styling to all dialog scrollable
 areas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added custom-scrollbar class to scrollable elements in:
- EffectBrowser dialog content area
- ProjectsDialog projects list
- CommandPalette results list
- Modal content area
- TrackList automation parameter label containers

This ensures consistent scrollbar styling across all dialogs and UI elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/dialogs/ProjectsDialog.tsx | 2 +-
 components/effects/EffectBrowser.tsx  | 2 +-
 components/tracks/TrackList.tsx       | 4 ++--
 components/ui/CommandPalette.tsx      | 2 +-
 components/ui/Modal.tsx               | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/dialogs/ProjectsDialog.tsx b/components/dialogs/ProjectsDialog.tsx
index 94ac591..762964f 100644
--- a/components/dialogs/ProjectsDialog.tsx
+++ b/components/dialogs/ProjectsDialog.tsx
@@ -76,7 +76,7 @@ export function ProjectsDialog({
         </div>
 
         {/* Projects List */}
-        <div className="flex-1 overflow-y-auto p-6">
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-6">
           {projects.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 text-center">
               <FolderOpen className="h-16 w-16 text-muted-foreground mb-4" />
diff --git a/components/effects/EffectBrowser.tsx b/components/effects/EffectBrowser.tsx
index 2c046e2..ee6e49c 100644
--- a/components/effects/EffectBrowser.tsx
+++ b/components/effects/EffectBrowser.tsx
@@ -105,7 +105,7 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-4">
           <div className="space-y-6">
             {Object.entries(filteredCategories).map(([category, effects]) => (
               <div key={category}>
diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 4a3f407..43b98ed 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -420,7 +420,7 @@ export function TrackList({
                         )}
 
                         {/* Parameter labels - always visible */}
-                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
+                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto custom-scrollbar">
                           {automatedParams.map((paramName, index) => (
                             <span
                               key={index}
@@ -996,7 +996,7 @@ export function TrackList({
                         )}
 
                         {/* Parameter labels - always visible */}
-                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
+                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto custom-scrollbar">
                           {automatedParams.map((paramName, index) => (
                             <span
                               key={index}
diff --git a/components/ui/CommandPalette.tsx b/components/ui/CommandPalette.tsx
index 603f214..5c00bdd 100644
--- a/components/ui/CommandPalette.tsx
+++ b/components/ui/CommandPalette.tsx
@@ -144,7 +144,7 @@ export function CommandPalette({ actions, className }: CommandPaletteProps) {
         </div>
 
         {/* Results */}
-        <div className="max-h-96 overflow-y-auto p-2">
+        <div className="max-h-96 overflow-y-auto custom-scrollbar p-2">
           {Object.keys(groupedActions).length === 0 ? (
             <div className="p-8 text-center text-muted-foreground text-sm">
               No commands found
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index a602242..105299b 100644
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -102,7 +102,7 @@ export function Modal({
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-4">
           {children}
         </div>