From b8d2cb95850e7edfb550471aa7ff8c1e77cadffa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 06:59:24 +0100
Subject: [PATCH] refactor: make volume and pan sliders inline with labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed slider layout to horizontal:
- Label | Slider | Value all in one row
- Volume: "Volume" icon + label (64px) | slider (flex) | "80%" (40px)
- Pan: "Pan" label (64px) | slider (flex) | "C/L50/R50" (40px)
- Much more compact and professional looking
- Similar to professional DAW mixer strips

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

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

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 9f0b7db..20318f8 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -262,44 +262,44 @@ export function Track({
         {!track.collapsed && (
           <>
             {/* Volume */}
-            <div className="space-y-1">
-              <div className="flex items-center justify-between">
-                <label className="text-xs text-muted-foreground flex items-center gap-1">
-                  <Volume2 className="h-3 w-3" />
-                  Volume
-                </label>
-                <span className="text-xs text-muted-foreground">
-                  {Math.round(track.volume * 100)}%
-                </span>
+            <div className="flex items-center gap-2">
+              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
+                <Volume2 className="h-3 w-3" />
+                Volume
+              </label>
+              <div className="flex-1">
+                <Slider
+                  value={track.volume}
+                  onChange={onVolumeChange}
+                  min={0}
+                  max={1}
+                  step={0.01}
+                />
               </div>
-              <Slider
-                value={track.volume}
-                onChange={onVolumeChange}
-                min={0}
-                max={1}
-                step={0.01}
-              />
+              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
+                {Math.round(track.volume * 100)}%
+              </span>
             </div>
 
             {/* Pan */}
-            <div className="space-y-1">
-              <div className="flex items-center justify-between">
-                <label className="text-xs text-muted-foreground">Pan</label>
-                <span className="text-xs text-muted-foreground">
-                  {track.pan === 0
-                    ? 'C'
-                    : track.pan < 0
-                    ? `L${Math.round(Math.abs(track.pan) * 100)}`
-                    : `R${Math.round(track.pan * 100)}`}
-                </span>
+            <div className="flex items-center gap-2">
+              <label className="text-xs text-muted-foreground w-16 flex-shrink-0">Pan</label>
+              <div className="flex-1">
+                <Slider
+                  value={track.pan}
+                  onChange={onPanChange}
+                  min={-1}
+                  max={1}
+                  step={0.01}
+                />
               </div>
-              <Slider
-                value={track.pan}
-                onChange={onPanChange}
-                min={-1}
-                max={1}
-                step={0.01}
-              />
+              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
+                {track.pan === 0
+                  ? 'C'
+                  : track.pan < 0
+                  ? `L${Math.abs(Math.round(track.pan * 100))}`
+                  : `R${Math.round(track.pan * 100)}`}
+              </span>
             </div>
           </>
         )}