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
ref={containerRef}
className={cn(
'flex border-b border-border',
'flex',
isSelected && 'ring-2 ring-primary ring-inset'
)}
style={{ height: trackHeight }}
>
{/* Left: Track Control Panel (Fixed Width) */}
<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()}
>
{/* Track Name & Collapse Toggle */}
@@ -308,7 +308,7 @@ export function Track({
{/* Right: Waveform Area (Flexible Width) */}
<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}
>
{!track.collapsed && (
@@ -316,11 +316,11 @@ export function Track({
{track.audioBuffer ? (
<canvas
ref={canvasRef}
className="w-full h-full cursor-pointer"
className="absolute inset-0 w-full h-full cursor-pointer"
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
</div>
)}