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:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user