feat: center fader with knob above and buttons below

- Restructured TrackControls layout using flexbox justify-between
- Pan knob positioned at top
- Fader vertically centered in flex-1 middle section
- R/S/M/A/E buttons positioned at bottom in two rows
- Main container uses h-full for proper vertical distribution

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

Co-Authored-By: Claude <noreply@anthropic.com>

components/tracks/TrackControls.tsx

@@ -56,8 +56,8 @@ export function TrackControls({
   className,
 }: TrackControlsProps) {
   return (
-    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
+    <div className={cn('flex flex-col items-center justify-between h-full py-2', className)}>
-      {/* Pan Control - Centered */}
+      {/* Pan Control - Top */}
       <div className="flex justify-center w-full">
         <CircularKnob
           value={pan}
@@ -77,8 +77,8 @@ export function TrackControls({
         />
       </div>
 
-      {/* Track Fader with Integrated Meters - Centered */}
+      {/* Track Fader - Center (vertically centered in remaining space) */}
-      <div className="flex justify-center w-full">
+      <div className="flex justify-center items-center flex-1 w-full">
         <TrackFader
           value={volume}
           peakLevel={peakLevel}
@@ -89,89 +89,92 @@ export function TrackControls({
         />
       </div>
 
-      {/* Control Buttons Row 1: R/S/M */}
+      {/* Control Buttons - Bottom */}
-      <div className="flex items-center gap-0.5 w-full justify-center">
+      <div className="flex flex-col gap-1 w-full">
-        {/* Record Arm */}
+        {/* Control Buttons Row 1: R/S/M */}
-        {onRecordToggle && (
+        <div className="flex items-center gap-0.5 w-full justify-center">
-          <button
+          {/* Record Arm */}
-            onClick={onRecordToggle}
+          {onRecordToggle && (
-            className={cn(
+            <button
-              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+              onClick={onRecordToggle}
-              isRecordEnabled
+              className={cn(
-                ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
+                isRecordEnabled
-              isRecording && 'animate-pulse'
+                  ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
-            )}
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
-            title="Arm track for recording"
+                isRecording && 'animate-pulse'
-          >
+              )}
-            <Circle className="h-2.5 w-2.5 fill-current" />
+              title="Arm track for recording"
-          </button>
+            >
-        )}
+              <Circle className="h-2.5 w-2.5 fill-current" />
-
+            </button>
-        {/* Solo Button */}
-        {onSoloToggle && (
-          <button
-            onClick={onSoloToggle}
-            className={cn(
-              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-              isSolo
-                ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
-                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-            )}
-            title="Solo track"
-          >
-            <Headphones className="h-2.5 w-2.5" />
-          </button>
-        )}
-
-        {/* Mute Button */}
-        <button
-          onClick={onMuteToggle}
-          className={cn(
-            'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-            isMuted
-              ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
-              : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
           )}
-          title="Mute track"
-        >
-          M
-        </button>
-      </div>
 
-      {/* Control Buttons Row 2: A/E */}
+          {/* Solo Button */}
-      <div className="flex items-center gap-0.5 w-full justify-center">
+          {onSoloToggle && (
-        {/* Automation Toggle */}
+            <button
-        {onAutomationToggle && (
+              onClick={onSoloToggle}
+              className={cn(
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+                isSolo
+                  ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+              )}
+              title="Solo track"
+            >
+              <Headphones className="h-2.5 w-2.5" />
+            </button>
+          )}
+
+          {/* Mute Button */}
           <button
-            onClick={onAutomationToggle}
+            onClick={onMuteToggle}
             className={cn(
               'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-              showAutomation
+              isMuted
-                ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+                ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
                 : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
             )}
-            title="Toggle automation"
+            title="Mute track"
           >
-            A
+            M
           </button>
-        )}
+        </div>
 
-        {/* Effects Button */}
+        {/* Control Buttons Row 2: A/E */}
-        {onEffectsClick && (
+        <div className="flex items-center gap-0.5 w-full justify-center">
-          <button
+          {/* Automation Toggle */}
-            onClick={onEffectsClick}
+          {onAutomationToggle && (
-            className={cn(
+            <button
-              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+              onClick={onAutomationToggle}
-              showEffects
+              className={cn(
-                ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+                showAutomation
-            )}
+                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-            title={showEffects ? 'Hide effects' : 'Show effects'}
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-          >
+              )}
-            E
+              title="Toggle automation"
-          </button>
+            >
-        )}
+              A
+            </button>
+          )}
+
+          {/* Effects Button */}
+          {onEffectsClick && (
+            <button
+              onClick={onEffectsClick}
+              className={cn(
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+                showEffects
+                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+              )}
+              title={showEffects ? 'Hide effects' : 'Show effects'}
+            >
+              E
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );