fix: implement fixed-height track container with flexible waveform

- 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>
This commit is contained in:
2025-11-19 12:54:45 +01:00
parent 29de647b30
commit 4c794dd293

View File

@@ -206,8 +206,15 @@ 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 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}
@@ -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"