fix: align waveform height with control panel and fix border separator

Changes:
- Waveform now uses absolute positioning to fill the full height of the track
- Border separator only appears at the bottom of each section, not through the control panel
- Both control panel and waveform are now the same height
- Cleaner visual appearance

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-18 06:53:44 +01:00
parent 4381057f3f
commit 8bd326a21b

View File

@@ -164,14 +164,14 @@ export function Track({
<div <div
ref={containerRef} ref={containerRef}
className={cn( className={cn(
'flex border-b border-border', 'flex',
isSelected && 'ring-2 ring-primary ring-inset' isSelected && 'ring-2 ring-primary ring-inset'
)} )}
style={{ height: trackHeight }} style={{ height: trackHeight }}
> >
{/* Left: Track Control Panel (Fixed Width) */} {/* Left: Track Control Panel (Fixed Width) */}
<div <div
className="w-72 flex-shrink-0 bg-card border-r border-border p-3 flex flex-col gap-2" className="w-72 flex-shrink-0 bg-card border-r border-border border-b border-border p-3 flex flex-col gap-2"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* Track Name & Collapse Toggle */} {/* Track Name & Collapse Toggle */}
@@ -308,7 +308,7 @@ export function Track({
{/* Right: Waveform Area (Flexible Width) */} {/* Right: Waveform Area (Flexible Width) */}
<div <div
className="flex-1 relative bg-slate-900 cursor-pointer" className="flex-1 relative bg-slate-900 border-b border-border cursor-pointer"
onClick={onSelect} onClick={onSelect}
> >
{!track.collapsed && ( {!track.collapsed && (
@@ -316,11 +316,11 @@ export function Track({
{track.audioBuffer ? ( {track.audioBuffer ? (
<canvas <canvas
ref={canvasRef} ref={canvasRef}
className="w-full h-full cursor-pointer" className="absolute inset-0 w-full h-full cursor-pointer"
onClick={handleCanvasClick} onClick={handleCanvasClick}
/> />
) : ( ) : (
<div className="flex items-center justify-center h-full text-sm text-muted-foreground"> <div className="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
No audio loaded No audio loaded
</div> </div>
)} )}