fix: make only waveform area scrollable, keep track controls fixed

Fixed horizontal scrollbar implementation to only scroll the waveform
content area while keeping track controls fixed in the viewport.

Changes:
- Wrapped waveform content in a scrollable container with overflow-x-auto
- Moved minWidth calculation to inner container
- Track controls now stay fixed at 192px width
- No scrollbar appears on initial track load
- Scrollbar only appears when zooming extends content beyond viewport

Resolves issue where entire track row (including controls) was
scrolling out of view when zoomed in.

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

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

components/tracks/Track.tsx

@@ -604,7 +604,7 @@ export function Track({
       )}
     >
       {/* Top: Track Row (Control Panel + Waveform) */}
-      <div className="flex" style={{ height: trackHeight }}>
+      <div className="flex overflow-hidden" style={{ height: trackHeight }}>
         {/* Left: Track Control Panel (Fixed Width) - Ableton Style */}
         <div
           className={cn(
@@ -723,13 +723,15 @@ export function Track({
           )}
         </div>
 
-      {/* Right: Waveform Area (Flexible Width) */}
+      {/* Right: Waveform Area (Flexible Width) - Scrollable */}
-      <div
+      <div className="flex-1 relative bg-waveform-bg border-b border-l border-border overflow-x-auto custom-scrollbar">
-        className="flex-1 relative bg-waveform-bg border-b border-l border-border"
+        {/* Inner container with dynamic width */}
-        style={{
+        <div
-          minWidth: track.audioBuffer ? `${duration * zoom * 100}px` : undefined
+          className="relative h-full"
-        }}
+          style={{
-      >
+            minWidth: track.audioBuffer ? `${duration * zoom * 100}px` : '100%'
+          }}
+        >
         {/* Delete Button - Top Right Overlay */}
         <button
           onClick={(e) => {
@@ -788,8 +790,9 @@ export function Track({
             </>
           )
         )}
-      </div>
+        </div> {/* Close inner container with minWidth */}
-      </div>
+      </div> {/* Close waveform scrollable area */}
+      </div> {/* Close track row */}
 
       {/* Automation Lane */}
       {!track.collapsed && track.automation?.showAutomation && (() => {