From 8bd326a21b56303a0c1d923d73d8ff164db613af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 06:53:44 +0100
Subject: [PATCH] fix: align waveform height with control panel and fix border
 separator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/tracks/Track.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index e796e27..7cce716 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -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>
             )}