From cd311d8145aca77b11d7cca12b6360e87cea1067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 10:50:09 +0100
Subject: [PATCH] fix: make only waveform area scrollable, keep track controls
 fixed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index c19d3d2..8aa0670 100644
--- a/components/tracks/Track.tsx
+++ b/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) */}
-      <div
-        className="flex-1 relative bg-waveform-bg border-b border-l border-border"
-        style={{
-          minWidth: track.audioBuffer ? `${duration * zoom * 100}px` : undefined
-        }}
-      >
+      {/* Right: Waveform Area (Flexible Width) - Scrollable */}
+      <div className="flex-1 relative bg-waveform-bg border-b border-l border-border overflow-x-auto custom-scrollbar">
+        {/* Inner container with dynamic width */}
+        <div
+          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>
+        </div> {/* Close inner container with minWidth */}
+      </div> {/* Close waveform scrollable area */}
+      </div> {/* Close track row */}
 
       {/* Automation Lane */}
       {!track.collapsed && track.automation?.showAutomation && (() => {