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,6 +89,8 @@ export function TrackControls({
         />
       </div>
 
+      {/* Control Buttons - Bottom */}
+      <div className="flex flex-col gap-1 w-full">
         {/* Control Buttons Row 1: R/S/M */}
         <div className="flex items-center gap-0.5 w-full justify-center">
           {/* Record Arm */}
@@ -174,5 +176,6 @@ export function TrackControls({
           )}
         </div>
       </div>
+    </div>
   );
 }