From 39ea599f18bc5a481d44dc976e20a46568748b4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 11:11:38 +0100
Subject: [PATCH] fix: synchronize vertical scrolling between track controls
 and waveforms
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 45c05c8..91eedac 100644
--- a/components/tracks/TrackList.tsx
+++ b/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) */}
-        <div className="w-48 flex-shrink-0 overflow-y-auto custom-scrollbar">
+        {/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
+        <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) => (