fix: synchronize vertical scrolling between track controls and waveforms

Track controls now stay perfectly aligned with their waveforms during
vertical scrolling. The waveform column handles all scrolling (both
horizontal and vertical), and synchronizes its vertical scroll position
to the controls column.

Changes:
- Removed independent vertical scroll from controls column
- Added scroll event handler to waveforms column
- Controls column scrollTop is synced with waveforms column
- Track controls and waveforms now stay aligned at all times

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

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

components/tracks/TrackList.tsx

@@ -51,6 +51,14 @@ export function TrackList({
 }: TrackListProps) {
   const [importDialogOpen, setImportDialogOpen] = React.useState(false);
   const waveformScrollRef = React.useRef<HTMLDivElement>(null);
+  const controlsScrollRef = React.useRef<HTMLDivElement>(null);
+
+  // Synchronize vertical scroll between controls and waveforms
+  const handleWaveformScroll = React.useCallback(() => {
+    if (waveformScrollRef.current && controlsScrollRef.current) {
+      controlsScrollRef.current.scrollTop = waveformScrollRef.current.scrollTop;
+    }
+  }, []);
 
   const handleImportTrack = (buffer: AudioBuffer, name: string) => {
     if (onImportTrack) {
@@ -91,8 +99,8 @@ export function TrackList({
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Track List - Two Column Layout */}
       <div className="flex-1 flex overflow-hidden">
-        {/* Left Column: Track Controls (Fixed Width, Vertical Scroll) */}
+        {/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
-        <div className="w-48 flex-shrink-0 overflow-y-auto custom-scrollbar">
+        <div ref={controlsScrollRef} className="w-48 flex-shrink-0 overflow-hidden">
           {tracks.map((track) => (
             <Track
               key={track.id}
@@ -182,9 +190,10 @@ export function TrackList({
           ))}
         </div>
 
-        {/* Right Column: Waveforms (Flexible Width, Shared Horizontal Scroll) */}
+        {/* Right Column: Waveforms (Flexible Width, Shared Horizontal & Vertical Scroll) */}
         <div
           ref={waveformScrollRef}
+          onScroll={handleWaveformScroll}
           className="flex-1 overflow-auto custom-scrollbar"
         >
           {tracks.map((track) => (