From 594ff7f4c935264e0b48d6e3c6aeef22ae980f6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 11:37:45 +0100
Subject: [PATCH] fix: improve effects panel styling with padding and gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added padding around effects device rack and gap between effect cards
for better visual integration and spacing.

Changes:
- Added p-3 padding to effects rack container
- Added gap-3 between effect device cards
- Improves visual consistency and readability

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackExtensions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/tracks/TrackExtensions.tsx b/components/tracks/TrackExtensions.tsx
index e33dfca..0c43bdf 100644
--- a/components/tracks/TrackExtensions.tsx
+++ b/components/tracks/TrackExtensions.tsx
@@ -91,8 +91,8 @@ export function TrackExtensions({
 
         {/* Horizontal scrolling device rack - expanded state */}
         {track.showEffects && (
-          <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70">
-            <div className="flex h-full">
+          <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 p-3">
+            <div className="flex h-full gap-3">
               {track.effectChain.effects.length === 0 ? (
                 <div className="text-xs text-muted-foreground text-center py-8 w-full">
                   No devices. Click + to add an effect.