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/timeline/TimeScale.tsx

@@ -42,10 +42,16 @@ export function TimeScale({
 
   // Calculate total timeline width (match waveform calculation)
   // Uses 5 pixels per second as base scale, multiplied by zoom
+  // Always ensure minimum width is at least viewport width for full coverage
   const PIXELS_PER_SECOND_BASE = 5;
   const totalWidth = React.useMemo(() => {
-    return duration * zoom * PIXELS_PER_SECOND_BASE;
-  }, [duration, zoom]);
+    if (zoom >= 1) {
+      const calculatedWidth = duration * zoom * PIXELS_PER_SECOND_BASE;
+      // Ensure it's at least viewport width so timeline always fills
+      return Math.max(calculatedWidth, viewportWidth);
+    }
+    return viewportWidth;
+  }, [duration, zoom, viewportWidth]);
 
   // Update viewport width on resize
   React.useEffect(() => {