feat: improve track controls layout and increase track height

- Reverted buttons to two rows (R/S/M and A/E) for better organization
- Changed button borders from 'rounded' to 'rounded-md' for consistency
- Centered pan knob and fader in their containers
- Increased spacing from gap-1.5 py-1.5 to gap-2 py-2
- Increased default track height from 300px to 320px
- Increased minimum track height from 220px to 240px
- All buttons now clearly visible with proper spacing

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

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

components/tracks/TrackControls.tsx

@@ -56,34 +56,38 @@ export function TrackControls({
   className,
 }: TrackControlsProps) {
   return (
-    <div className={cn('flex flex-col items-center gap-1.5 py-1.5', className)}>
+    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
-      {/* Pan Control */}
+      {/* Pan Control - Centered */}
-      <CircularKnob
+      <div className="flex justify-center w-full">
-        value={pan}
+        <CircularKnob
-        onChange={onPanChange}
+          value={pan}
-        onTouchStart={onPanTouchStart}
+          onChange={onPanChange}
-        onTouchEnd={onPanTouchEnd}
+          onTouchStart={onPanTouchStart}
-        min={-1}
+          onTouchEnd={onPanTouchEnd}
-        max={1}
+          min={-1}
-        step={0.01}
+          max={1}
-        label="PAN"
+          step={0.01}
-        size={40}
+          label="PAN"
-        formatter={(value) => {
+          size={40}
-          if (Math.abs(value) < 0.01) return 'C';
+          formatter={(value) => {
-          if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
+            if (Math.abs(value) < 0.01) return 'C';
-          return `${(value * 100).toFixed(0)}R`;
+            if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
-        }}
+            return `${(value * 100).toFixed(0)}R`;
-      />
+          }}
+        />
+      </div>
 
-      {/* Track Fader with Integrated Meters */}
+      {/* Track Fader with Integrated Meters - Centered */}
-      <TrackFader
+      <div className="flex justify-center w-full">
-        value={volume}
+        <TrackFader
-        peakLevel={peakLevel}
+          value={volume}
-        rmsLevel={rmsLevel}
+          peakLevel={peakLevel}
-        onChange={onVolumeChange}
+          rmsLevel={rmsLevel}
-        onTouchStart={onVolumeTouchStart}
+          onChange={onVolumeChange}
-        onTouchEnd={onVolumeTouchEnd}
+          onTouchStart={onVolumeTouchStart}
-      />
+          onTouchEnd={onVolumeTouchEnd}
+        />
+      </div>
 
       {/* Control Buttons Row 1: R/S/M */}
       <div className="flex items-center gap-0.5 w-full justify-center">
@@ -92,7 +96,7 @@ export function TrackControls({
           <button
             onClick={onRecordToggle}
             className={cn(
-              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
               isRecordEnabled
                 ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
                 : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
@@ -109,7 +113,7 @@ export function TrackControls({
           <button
             onClick={onSoloToggle}
             className={cn(
-              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              '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'
@@ -124,7 +128,7 @@ export function TrackControls({
         <button
           onClick={onMuteToggle}
           className={cn(
-            'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+            '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'
@@ -142,7 +146,7 @@ export function TrackControls({
           <button
             onClick={onAutomationToggle}
             className={cn(
-              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
               showAutomation
                 ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
                 : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
@@ -158,7 +162,7 @@ export function TrackControls({
           <button
             onClick={onEffectsClick}
             className={cn(
-              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              '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'

types/track.ts

@@ -68,7 +68,7 @@ export const TRACK_COLORS: Record<TrackColor, string> = {
   gray: 'rgb(156, 163, 175)',
 };
 
-export const DEFAULT_TRACK_HEIGHT = 300; // Knob + fader with labels + R/S/M buttons
+export const DEFAULT_TRACK_HEIGHT = 320; // Knob + fader with labels + R/S/M/A/E buttons
-export const MIN_TRACK_HEIGHT = 220; // Minimum to fit knob + fader with labels + buttons
+export const MIN_TRACK_HEIGHT = 240; // Minimum to fit knob + fader with labels + all buttons
 export const MAX_TRACK_HEIGHT = 500; // Increased for better waveform viewing
 export const COLLAPSED_TRACK_HEIGHT = 48; // Extracted constant for collapsed state