fix: reduce master mute button size to 32x32px

Changed button dimensions from h-10 w-10 to h-8 w-8 for
a more compact, proportionate size.

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

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

components/controls/MasterControls.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { Volume2, VolumeX } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { MasterFader } from './MasterFader';
 import { cn } from '@/lib/utils/cn';
@@ -36,7 +34,7 @@ export function MasterControls({
 }: MasterControlsProps) {
   return (
     <div className={cn(
-      'flex flex-col items-center gap-3 px-4 py-3 bg-muted/10 border-2 border-accent/30 rounded-lg',
+      'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border-2 border-accent/50 rounded-lg',
       className
     )}>
       {/* Master Label */}
@@ -71,22 +69,18 @@ export function MasterControls({
       />
 
       {/* Mute Button */}
-      <Button
+      <button
-        variant={isMuted ? 'default' : 'outline'}
-        size="sm"
         onClick={onMuteToggle}
-        title={isMuted ? 'Unmute' : 'Mute'}
         className={cn(
-          'w-full h-8',
+          'h-8 w-8 rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
-          isMuted && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50'
+          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={isMuted ? 'Unmute' : 'Mute'}
       >
-        {isMuted ? (
+        M
-          <VolumeX className="h-4 w-4" />
+      </button>
-        ) : (
-          <Volume2 className="h-4 w-4" />
-        )}
-      </Button>
     </div>
   );
 }

components/controls/MasterFader.tsx

@@ -10,6 +10,8 @@ export interface MasterFaderProps {
   isClipping: boolean;
   onChange: (value: number) => void;
   onResetClip?: () => void;
+  onTouchStart?: () => void;
+  onTouchEnd?: () => void;
   className?: string;
 }
 
@@ -20,6 +22,8 @@ export function MasterFader({
   isClipping,
   onChange,
   onResetClip,
+  onTouchStart,
+  onTouchEnd,
   className,
 }: MasterFaderProps) {
   const [isDragging, setIsDragging] = React.useState(false);
@@ -43,6 +47,7 @@ export function MasterFader({
   const handleMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
+    onTouchStart?.();
     updateValue(e.clientY);
   };
 
@@ -56,7 +61,30 @@ export function MasterFader({
 
   const handleMouseUp = React.useCallback(() => {
     setIsDragging(false);
-  }, []);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    setIsDragging(true);
+    onTouchStart?.();
+    updateValue(touch.clientY);
+  };
+
+  const handleTouchMove = React.useCallback(
+    (e: TouchEvent) => {
+      if (!isDragging || e.touches.length === 0) return;
+      const touch = e.touches[0];
+      updateValue(touch.clientY);
+    },
+    [isDragging]
+  );
+
+  const handleTouchEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
 
   const updateValue = (clientY: number) => {
     if (!containerRef.current) return;
@@ -72,15 +100,19 @@ export function MasterFader({
     if (isDragging) {
       window.addEventListener('mousemove', handleMouseMove);
       window.addEventListener('mouseup', handleMouseUp);
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
       return () => {
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
       };
     }
-  }, [isDragging, handleMouseMove, handleMouseUp]);
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
 
   return (
-    <div className={cn('flex gap-3', className)}>
+    <div className={cn('flex gap-3', className)} style={{ marginLeft: '16px' }}>
       {/* dB Labels (Left) */}
       <div className="flex flex-col justify-between text-[10px] font-mono text-muted-foreground py-1">
         <span>0</span>
@@ -94,6 +126,7 @@ export function MasterFader({
         ref={containerRef}
         className="relative w-12 h-40 bg-background/50 rounded-md border border-border/50 cursor-pointer"
         onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
       >
         {/* Peak Meter (Horizontal Bar - Top) */}
         <div className="absolute inset-x-2 top-2 h-3 bg-background/80 rounded-sm overflow-hidden border border-border/30">
@@ -118,9 +151,9 @@ export function MasterFader({
           >
             <div className={cn(
               'w-full h-full',
-              rmsDb > -3 ? 'bg-red-400' :
+              rmsDb > -3 ? 'bg-red-500' :
-              rmsDb > -6 ? 'bg-yellow-400' :
+              rmsDb > -6 ? 'bg-yellow-500' :
-              'bg-green-400'
+              'bg-green-500'
             )} />
           </div>
         </div>
@@ -169,7 +202,7 @@ export function MasterFader({
       </div>
 
       {/* Value and Level Display (Right) */}
-      <div className="flex flex-col justify-between items-start text-[9px] font-mono py-1">
+      <div className="flex flex-col justify-between items-start text-[9px] font-mono py-1 w-[36px]">
         {/* Current dB Value */}
         <div className={cn(
           'font-bold text-[11px]',
@@ -201,9 +234,9 @@ export function MasterFader({
           <span className="text-muted-foreground/60">RM</span>
           <span className={cn(
             'font-mono text-[10px]',
-            rmsDb > -3 ? 'text-red-400' :
+            rmsDb > -3 ? 'text-red-500' :
-            rmsDb > -6 ? 'text-yellow-400' :
+            rmsDb > -6 ? 'text-yellow-500' :
-            'text-green-400'
+            'text-green-500'
           )}>
             {rmsDb > -60 ? `${rmsDb.toFixed(1)}` : '-∞'}
           </span>

components/editor/AudioEditor.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { Music, Plus, Upload, Trash2, Settings, Download } from 'lucide-react';
 import { PlaybackControls } from './PlaybackControls';
+import { MasterControls } from '@/components/controls/MasterControls';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
 import { CommandPalette } from '@/components/ui/CommandPalette';
 import { GlobalSettingsDialog } from '@/components/settings/GlobalSettingsDialog';
@@ -1034,6 +1035,30 @@ export function AudioEditor() {
             />
           </div>
         </main>
+
+        {/* Right Sidebar - Master Controls */}
+        <aside className="flex-shrink-0 border-l border-border bg-card flex items-center justify-center p-4">
+          <MasterControls
+            volume={masterVolume}
+            pan={masterPan}
+            peakLevel={masterPeakLevel}
+            rmsLevel={masterRmsLevel}
+            isClipping={masterIsClipping}
+            isMuted={isMasterMuted}
+            onVolumeChange={setMasterVolume}
+            onPanChange={setMasterPan}
+            onMuteToggle={() => {
+              if (isMasterMuted) {
+                setMasterVolume(0.8);
+                setIsMasterMuted(false);
+              } else {
+                setMasterVolume(0);
+                setIsMasterMuted(true);
+              }
+            }}
+            onResetClip={resetClipIndicator}
+          />
+        </aside>
       </div>
 
       {/* Transport Controls */}
@@ -1044,22 +1069,11 @@ export function AudioEditor() {
           currentTime={currentTime}
           duration={duration}
           volume={masterVolume}
-          pan={masterPan}
           onPlay={play}
           onPause={pause}
           onStop={stop}
           onSeek={seek}
           onVolumeChange={setMasterVolume}
-          onPanChange={setMasterPan}
-          onMuteToggle={() => {
-            if (isMasterMuted) {
-              setMasterVolume(0.8);
-              setIsMasterMuted(false);
-            } else {
-              setMasterVolume(0);
-              setIsMasterMuted(true);
-            }
-          }}
           currentTimeFormatted={formatDuration(currentTime)}
           durationFormatted={formatDuration(duration)}
           isRecording={recordingState.isRecording}
@@ -1073,10 +1087,6 @@ export function AudioEditor() {
           onPunchOutTimeChange={setPunchOutTime}
           overdubEnabled={overdubEnabled}
           onOverdubEnabledChange={setOverdubEnabled}
-          masterPeakLevel={masterPeakLevel}
-          masterRmsLevel={masterRmsLevel}
-          masterIsClipping={masterIsClipping}
-          onResetClip={resetClipIndicator}
         />
       </div>
 

components/editor/PlaybackControls.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Play, Pause, Square, SkipBack, Circle, AlignVerticalJustifyStart, AlignVerticalJustifyEnd, Layers } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
-import { MasterControls } from '@/components/controls/MasterControls';
 import { cn } from '@/lib/utils/cn';
 
 export interface PlaybackControlsProps {
@@ -12,14 +11,11 @@ export interface PlaybackControlsProps {
   currentTime: number;
   duration: number;
   volume: number;
-  pan?: number;
   onPlay: () => void;
   onPause: () => void;
   onStop: () => void;
   onSeek: (time: number, autoPlay?: boolean) => void;
   onVolumeChange: (volume: number) => void;
-  onPanChange?: (pan: number) => void;
-  onMuteToggle?: () => void;
   disabled?: boolean;
   className?: string;
   currentTimeFormatted?: string;
@@ -35,10 +31,6 @@ export interface PlaybackControlsProps {
   onPunchOutTimeChange?: (time: number) => void;
   overdubEnabled?: boolean;
   onOverdubEnabledChange?: (enabled: boolean) => void;
-  masterPeakLevel?: number;
-  masterRmsLevel?: number;
-  masterIsClipping?: boolean;
-  onResetClip?: () => void;
 }
 
 export function PlaybackControls({
@@ -47,14 +39,11 @@ export function PlaybackControls({
   currentTime,
   duration,
   volume,
-  pan = 0,
   onPlay,
   onPause,
   onStop,
   onSeek,
   onVolumeChange,
-  onPanChange,
-  onMuteToggle,
   disabled = false,
   className,
   currentTimeFormatted,
@@ -70,10 +59,6 @@ export function PlaybackControls({
   onPunchOutTimeChange,
   overdubEnabled = false,
   onOverdubEnabledChange,
-  masterPeakLevel = 0,
-  masterRmsLevel = 0,
-  masterIsClipping = false,
-  onResetClip,
 }: PlaybackControlsProps) {
   const handlePlayPause = () => {
     if (isPlaying) {
@@ -265,22 +250,6 @@ export function PlaybackControls({
             </>
           )}
         </div>
-
-        {/* Master Controls */}
-        {onPanChange && onMuteToggle && (
-          <MasterControls
-            volume={volume}
-            pan={pan}
-            peakLevel={masterPeakLevel}
-            rmsLevel={masterRmsLevel}
-            isClipping={masterIsClipping}
-            isMuted={volume === 0}
-            onVolumeChange={onVolumeChange}
-            onPanChange={onPanChange}
-            onMuteToggle={onMuteToggle}
-            onResetClip={onResetClip}
-          />
-        )}
       </div>
     </div>
   );

components/tracks/Track.tsx

@@ -646,97 +646,41 @@ export function Track({
           {/* Track Controls - Only show when not collapsed */}
           {!track.collapsed && (
             <div className="flex-1 flex flex-col items-center justify-between min-h-0 overflow-hidden">
-              {/* Integrated Track Controls (Pan + Fader + Mute) */}
+              {/* Integrated Track Controls (Pan + Fader + Buttons) */}
               <TrackControls
                 volume={track.volume}
                 pan={track.pan}
                 peakLevel={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
                 rmsLevel={track.recordEnabled || isRecording ? recordingLevel * 0.7 : playbackLevel * 0.7}
                 isMuted={track.mute}
+                isSolo={track.solo}
+                isRecordEnabled={track.recordEnabled}
+                showAutomation={track.automation?.showAutomation}
+                showEffects={track.showEffects}
+                isRecording={isRecording}
                 onVolumeChange={onVolumeChange}
                 onPanChange={onPanChange}
                 onMuteToggle={onToggleMute}
+                onSoloToggle={onToggleSolo}
+                onRecordToggle={onToggleRecordEnable}
+                onAutomationToggle={() => {
+                  onUpdateTrack(track.id, {
+                    automation: {
+                      ...track.automation,
+                      showAutomation: !track.automation?.showAutomation,
+                    },
+                  });
+                }}
+                onEffectsClick={() => {
+                  onUpdateTrack(track.id, {
+                    showEffects: !track.showEffects,
+                  });
+                }}
                 onVolumeTouchStart={handleVolumeTouchStart}
                 onVolumeTouchEnd={handleVolumeTouchEnd}
                 onPanTouchStart={handlePanTouchStart}
                 onPanTouchEnd={handlePanTouchEnd}
               />
-
-              {/* Inline Button Row - Below controls */}
-              <div className="flex-shrink-0 w-full">
-                {/* R/S/A inline row with icons */}
-                <div className="flex items-center gap-1 justify-center">
-                  {/* Record Arm */}
-                  {onToggleRecordEnable && (
-                    <button
-                      onClick={onToggleRecordEnable}
-                      className={cn(
-                        'h-6 w-6 rounded flex items-center justify-center transition-all',
-                        track.recordEnabled
-                          ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
-                          : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
-                        isRecording && 'animate-pulse'
-                      )}
-                      title="Arm track for recording"
-                    >
-                      <Circle className="h-3 w-3 fill-current" />
-                    </button>
-                  )}
-
-                  {/* Solo Button */}
-                  <button
-                    onClick={onToggleSolo}
-                    className={cn(
-                      'h-6 w-6 rounded flex items-center justify-center transition-all',
-                      track.solo
-                        ? '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-3 w-3" />
-                  </button>
-
-                  {/* Automation Toggle */}
-                  <button
-                    onClick={() => {
-                      onUpdateTrack(track.id, {
-                        automation: {
-                          ...track.automation,
-                          showAutomation: !track.automation?.showAutomation,
-                        },
-                      });
-                    }}
-                    className={cn(
-                      'h-6 w-6 rounded flex items-center justify-center transition-all text-[10px] font-bold',
-                      track.automation?.showAutomation
-                        ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                        : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-                    )}
-                    title={track.automation?.showAutomation ? 'Hide automation' : 'Show automation'}
-                  >
-                    A
-                  </button>
-
-                  {/* Effects Toggle */}
-                  <button
-                    onClick={() => {
-                      onUpdateTrack(track.id, {
-                        showEffects: !track.showEffects,
-                      });
-                    }}
-                    className={cn(
-                      'h-6 w-6 rounded flex items-center justify-center transition-all',
-                      track.showEffects
-                        ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                        : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-                    )}
-                    title={track.showEffects ? 'Hide effects' : 'Show effects'}
-                  >
-                    <Sparkles className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
             </div>
           )}
         </div>

components/tracks/TrackControls.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Volume2, VolumeX } from 'lucide-react';
+import { Circle, Headphones, Waveform, MoreHorizontal } from 'lucide-react';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { TrackFader } from './TrackFader';
 import { cn } from '@/lib/utils/cn';
@@ -12,9 +12,18 @@ export interface TrackControlsProps {
   peakLevel: number;
   rmsLevel: number;
   isMuted?: boolean;
+  isSolo?: boolean;
+  isRecordEnabled?: boolean;
+  showAutomation?: boolean;
+  showEffects?: boolean;
+  isRecording?: boolean;
   onVolumeChange: (volume: number) => void;
   onPanChange: (pan: number) => void;
   onMuteToggle: () => void;
+  onSoloToggle?: () => void;
+  onRecordToggle?: () => void;
+  onAutomationToggle?: () => void;
+  onEffectsClick?: () => void;
   onVolumeTouchStart?: () => void;
   onVolumeTouchEnd?: () => void;
   onPanTouchStart?: () => void;
@@ -28,9 +37,18 @@ export function TrackControls({
   peakLevel,
   rmsLevel,
   isMuted = false,
+  isSolo = false,
+  isRecordEnabled = false,
+  showAutomation = false,
+  showEffects = false,
+  isRecording = false,
   onVolumeChange,
   onPanChange,
   onMuteToggle,
+  onSoloToggle,
+  onRecordToggle,
+  onAutomationToggle,
+  onEffectsClick,
   onVolumeTouchStart,
   onVolumeTouchEnd,
   onPanTouchStart,
@@ -38,48 +56,129 @@ export function TrackControls({
   className,
 }: TrackControlsProps) {
   return (
-    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
+    <div className={cn(
-      {/* Pan Control */}
+      'flex flex-col items-center justify-between h-full px-3 pt-2 pb-4 bg-card/50 border-2 border-accent/50 rounded-lg',
-      <CircularKnob
+      className
-        value={pan}
+    )}>
-        onChange={onPanChange}
+      {/* Pan Control - Top */}
-        onTouchStart={onPanTouchStart}
+      <div className="flex justify-center w-full">
-        onTouchEnd={onPanTouchEnd}
+        <CircularKnob
-        min={-1}
+          value={pan}
-        max={1}
+          onChange={onPanChange}
-        step={0.01}
+          onTouchStart={onPanTouchStart}
-        label="PAN"
+          onTouchEnd={onPanTouchEnd}
-        size={40}
+          min={-1}
-        formatter={(value) => {
+          max={1}
-          if (Math.abs(value) < 0.01) return 'C';
+          step={0.01}
-          if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
+          label="PAN"
-          return `${(value * 100).toFixed(0)}R`;
+          size={40}
-        }}
+          formatter={(value) => {
-      />
+            if (Math.abs(value) < 0.01) return 'C';
+            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 - Center (vertically centered in remaining space) */}
-      <TrackFader
+      <div className="flex justify-center items-center flex-1 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>
 
-      {/* Mute Button */}
+      {/* Control Buttons - Bottom */}
-      <button
+      <div className="flex flex-col gap-1 w-full">
-        onClick={onMuteToggle}
+        {/* Control Buttons Row 1: R/S/M */}
-        className={cn(
+        <div className="flex items-center gap-0.5 w-full justify-center">
-          'w-8 h-6 rounded text-[10px] font-bold transition-colors border',
+          {/* Record Arm */}
-          isMuted
+          {onRecordToggle && (
-            ? 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50 text-red-500'
+            <button
-            : 'bg-muted/20 hover:bg-muted/30 border-border/50 text-muted-foreground'
+              onClick={onRecordToggle}
-        )}
+              className={cn(
-        title={isMuted ? 'Unmute' : 'Mute'}
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-      >
+                isRecordEnabled
-        M
+                  ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
-      </button>
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
+                isRecording && 'animate-pulse'
+              )}
+              title="Arm track for recording"
+            >
+              <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 */}
+        <div className="flex items-center gap-0.5 w-full justify-center">
+          {/* Automation Toggle */}
+          {onAutomationToggle && (
+            <button
+              onClick={onAutomationToggle}
+              className={cn(
+                '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'
+              )}
+              title="Toggle automation"
+            >
+              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>
   );
 }

components/tracks/TrackFader.tsx

@@ -60,6 +60,28 @@ export function TrackFader({
     onTouchEnd?.();
   }, [onTouchEnd]);
 
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    setIsDragging(true);
+    onTouchStart?.();
+    updateValue(touch.clientY);
+  };
+
+  const handleTouchMove = React.useCallback(
+    (e: TouchEvent) => {
+      if (!isDragging || e.touches.length === 0) return;
+      const touch = e.touches[0];
+      updateValue(touch.clientY);
+    },
+    [isDragging]
+  );
+
+  const handleTouchEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
+
   const updateValue = (clientY: number) => {
     if (!containerRef.current) return;
 
@@ -74,15 +96,19 @@ export function TrackFader({
     if (isDragging) {
       window.addEventListener('mousemove', handleMouseMove);
       window.addEventListener('mouseup', handleMouseUp);
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
       return () => {
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
       };
     }
-  }, [isDragging, handleMouseMove, handleMouseUp]);
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
 
   return (
-    <div className={cn('flex gap-2', className)}>
+    <div className={cn('flex gap-2', className)} style={{ marginLeft: '16px' }}>
       {/* dB Labels (Left) */}
       <div className="flex flex-col justify-between text-[9px] font-mono text-muted-foreground py-1">
         <span>0</span>
@@ -96,6 +122,7 @@ export function TrackFader({
         ref={containerRef}
         className="relative w-10 h-32 bg-background/50 rounded-md border border-border/50 cursor-pointer"
         onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
       >
         {/* Peak Meter (Horizontal Bar - Top) */}
         <div className="absolute inset-x-1.5 top-1.5 h-2.5 bg-background/80 rounded-sm overflow-hidden border border-border/30">
@@ -120,9 +147,9 @@ export function TrackFader({
           >
             <div className={cn(
               'w-full h-full',
-              rmsDb > -3 ? 'bg-red-400' :
+              rmsDb > -3 ? 'bg-red-500' :
-              rmsDb > -6 ? 'bg-yellow-400' :
+              rmsDb > -6 ? 'bg-yellow-500' :
-              'bg-green-400'
+              'bg-green-500'
             )} />
           </div>
         </div>
@@ -163,7 +190,7 @@ export function TrackFader({
       <div className="flex flex-col justify-center items-start text-[9px] font-mono">
         {/* Current dB Value */}
         <div className={cn(
-          'font-bold text-[10px]',
+          'font-bold text-[10px] w-[32px]',
           valueDb > -3 ? 'text-red-500' :
           valueDb > -6 ? 'text-yellow-500' :
           'text-green-500'

components/ui/CircularKnob.tsx

@@ -91,17 +91,51 @@ export function CircularKnob({
     onTouchEnd?.();
   }, [onTouchEnd]);
 
+  const handleTouchStart = React.useCallback(
+    (e: React.TouchEvent) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      setIsDragging(true);
+      dragStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        value,
+      };
+      onTouchStart?.();
+    },
+    [value, onTouchStart]
+  );
+
+  const handleTouchMove = React.useCallback(
+    (e: TouchEvent) => {
+      if (isDragging && e.touches.length > 0) {
+        const touch = e.touches[0];
+        updateValue(touch.clientX, touch.clientY);
+      }
+    },
+    [isDragging, updateValue]
+  );
+
+  const handleTouchEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
+
   React.useEffect(() => {
     if (isDragging) {
       window.addEventListener('mousemove', handleMouseMove);
       window.addEventListener('mouseup', handleMouseUp);
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
 
       return () => {
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
       };
     }
-  }, [isDragging, handleMouseMove, handleMouseUp]);
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
 
   // Calculate rotation angle (-135deg to 135deg, 270deg range)
   const percentage = (value - min) / (max - min);
@@ -115,6 +149,28 @@ export function CircularKnob({
     ? `L${Math.abs(Math.round(value * 100))}`
     : `R${Math.round(value * 100)}`;
 
+  // Calculate arc parameters for center-based rendering
+  const isNearCenter = Math.abs(value) < 0.01;
+  const centerPercentage = 0.5; // Center position (50%)
+
+  // Arc goes from center to current value
+  let arcStartPercentage: number;
+  let arcLength: number;
+
+  if (value < -0.01) {
+    // Left side: arc from value to center
+    arcStartPercentage = percentage;
+    arcLength = centerPercentage - percentage;
+  } else if (value > 0.01) {
+    // Right side: arc from center to value
+    arcStartPercentage = centerPercentage;
+    arcLength = percentage - centerPercentage;
+  } else {
+    // Center: no arc
+    arcStartPercentage = centerPercentage;
+    arcLength = 0;
+  }
+
   return (
     <div className={cn('flex flex-col items-center gap-1', className)}>
       {label && (
@@ -126,6 +182,7 @@ export function CircularKnob({
       <div
         ref={knobRef}
         onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
         className="relative cursor-pointer select-none"
         style={{ width: size, height: size }}
       >
@@ -147,19 +204,21 @@ export function CircularKnob({
             className="text-muted/30"
           />
 
-          {/* Value arc */}
+          {/* Value arc - only show when not centered */}
-          <circle
+          {!isNearCenter && (
-            cx={size / 2}
+            <circle
-            cy={size / 2}
+              cx={size / 2}
-            r={size / 2 - 4}
+              cy={size / 2}
-            fill="none"
+              r={size / 2 - 4}
-            stroke="currentColor"
+              fill="none"
-            strokeWidth="3"
+              stroke="currentColor"
-            strokeLinecap="round"
+              strokeWidth="3"
-            className="text-primary"
+              strokeLinecap="round"
-            strokeDasharray={`${(percentage * 270 * Math.PI * (size / 2 - 4)) / 180} ${(Math.PI * 2 * (size / 2 - 4))}`}
+              className="text-primary"
-            transform={`rotate(-225 ${size / 2} ${size / 2})`}
+              strokeDasharray={`${(arcLength * 270 * Math.PI * (size / 2 - 4)) / 180} ${(Math.PI * 2 * (size / 2 - 4))}`}
-          />
+              transform={`rotate(${-225 + arcStartPercentage * 270} ${size / 2} ${size / 2})`}
+            />
+          )}
         </svg>
 
         {/* Knob body */}

lib/hooks/useMultiTrackPlayer.ts

@@ -112,8 +112,8 @@ export function useMultiTrackPlayer(
         }
       }
 
-      // Convert linear peak to logarithmic dB scale
+      // Store raw linear peak (will be converted to dB in the fader component)
-      levels[track.id] = linearToDbScale(peak);
+      levels[track.id] = peak;
     });
 
     setTrackLevels(levels);

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 = 340; // 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