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