From 4c794dd293ea901f66405928d3dba553930f625a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 12:54:45 +0100
Subject: [PATCH] fix: implement fixed-height track container with flexible
 waveform
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Track container now has fixed height (240px default or track.height)
- Waveform uses flex-1 to take remaining space
- Automation and effects bars use flex-shrink-0 for fixed height
- When bars expand, waveform shrinks instead of container growing
- Matches DAW behavior where track height stays constant

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackList.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 8272767..ad646c5 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -206,9 +206,16 @@ export function TrackList({
           <div className="flex flex-col">
             {tracks.map((track) => (
               <React.Fragment key={track.id}>
-                {/* Track Waveform Row with bars stacked below */}
-                <div className="flex flex-col">
-                  <Track
+                {/* Track Waveform Row with bars stacked below - Fixed height container */}
+                <div
+                  className="flex flex-col overflow-hidden"
+                  style={{
+                    height: track.collapsed ? '48px' : `${track.height || 240}px`
+                  }}
+                >
+                  {/* Waveform - Takes remaining space */}
+                  <div className="flex-1 min-h-0">
+                    <Track
                     track={track}
                     zoom={zoom}
                     currentTime={currentTime}
@@ -292,10 +299,11 @@ export function TrackList({
                     isPlaying={isPlaying}
                     renderWaveformOnly={true}
                   />
+                  </div>
 
-                  {/* Automation Bar - Collapsible */}
+                  {/* Automation Bar - Collapsible - Fixed height when expanded */}
                   {!track.collapsed && (
-                    <div className="bg-card/90 backdrop-blur-sm border-b border-border">
+                    <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
                       {/* Automation Header - Clickable to toggle */}
                       <div
                         className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
@@ -385,9 +393,9 @@ export function TrackList({
                     </div>
                   )}
 
-                  {/* Effects Bar - Collapsible */}
+                  {/* Effects Bar - Collapsible - Fixed height when expanded */}
                   {!track.collapsed && (
-                    <div className="bg-card/90 backdrop-blur-sm border-b border-border">
+                    <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
                       {/* Effects Header - Collapsible */}
                       <div
                         className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"