refactor: make volume and pan sliders inline with labels

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

@@ -262,16 +262,12 @@ export function Track({
         {!track.collapsed && (
           <>
             {/* Volume */}
-            <div className="space-y-1">
+            <div className="flex items-center gap-2">
-              <div className="flex items-center justify-between">
+              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
-                <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">
+              <div className="flex-1">
-                  {Math.round(track.volume * 100)}%
-                </span>
-              </div>
                 <Slider
                   value={track.volume}
                   onChange={onVolumeChange}
@@ -280,19 +276,15 @@ export function Track({
                   step={0.01}
                 />
               </div>
-
+              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-            {/* Pan */}
+                {Math.round(track.volume * 100)}%
-            <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>
+
+            {/* Pan */}
+            <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}
@@ -301,6 +293,14 @@ export function Track({
                   step={0.01}
                 />
               </div>
+              <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>
           </>
         )}
       </div>