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:
@@ -206,9 +206,16 @@ export function TrackList({
|
|||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
{tracks.map((track) => (
|
{tracks.map((track) => (
|
||||||
<React.Fragment key={track.id}>
|
<React.Fragment key={track.id}>
|
||||||
{/* Track Waveform Row with bars stacked below */}
|
{/* Track Waveform Row with bars stacked below - Fixed height container */}
|
||||||
<div className="flex flex-col">
|
<div
|
||||||
<Track
|
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}
|
track={track}
|
||||||
zoom={zoom}
|
zoom={zoom}
|
||||||
currentTime={currentTime}
|
currentTime={currentTime}
|
||||||
@@ -292,10 +299,11 @@ export function TrackList({
|
|||||||
isPlaying={isPlaying}
|
isPlaying={isPlaying}
|
||||||
renderWaveformOnly={true}
|
renderWaveformOnly={true}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Automation Bar - Collapsible */}
|
{/* Automation Bar - Collapsible - Fixed height when expanded */}
|
||||||
{!track.collapsed && (
|
{!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 */}
|
{/* Automation Header - Clickable to toggle */}
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
|
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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Effects Bar - Collapsible */}
|
{/* Effects Bar - Collapsible - Fixed height when expanded */}
|
||||||
{!track.collapsed && (
|
{!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 */}
|
{/* Effects Header - Collapsible */}
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
|
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
|
||||||
|
|||||||
Reference in New Issue
Block a user