fix: timeline zoom and waveform rendering improvements

- Fix timeline width calculation to always fill viewport at minimum
- Fix waveform sampling to match timeline width calculation exactly
- Fix infinite scroll loop by removing circular callback
- Ensure scrollbars appear correctly when zooming in
- Use consistent PIXELS_PER_SECOND_BASE = 5 across all components

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

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

components/tracks/Track.tsx

@@ -329,7 +329,17 @@ export function Track({
 
     const buffer = track.audioBuffer;
     const channelData = buffer.getChannelData(0);
-    const samplesPerPixel = Math.floor(buffer.length / (width * zoom));
+    // Calculate samples per pixel based on the total width
+    // Must match the timeline calculation exactly
+    const PIXELS_PER_SECOND_BASE = 5;
+    let totalWidth;
+    if (zoom >= 1) {
+      const calculatedWidth = duration * zoom * PIXELS_PER_SECOND_BASE;
+      totalWidth = Math.max(calculatedWidth, width);
+    } else {
+      totalWidth = width;
+    }
+    const samplesPerPixel = buffer.length / totalWidth;
 
     // Draw waveform
     ctx.fillStyle = track.color;

components/tracks/TrackList.tsx

@@ -170,12 +170,7 @@ export function TrackList({
     });
 
     setSyncingScroll(false);
-
-    // Also call the external callback if provided
-    if (onTimeScaleScroll) {
-      onTimeScaleScroll();
-    }
-  }, [syncingScroll, onTimeScaleScroll]);
+  }, [syncingScroll]);
 
   // Expose the scroll handler via ref so AudioEditor can call it
   React.useEffect(() => {