From 3cc4cb555a4dca0928cf4f7c7ecfeefd88ea1820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 18:53:08 +0100
Subject: [PATCH] fix: align automation lane with waveform, improve header
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Automation lane improvements:
- Lane now aligns exactly with waveform width using two-column layout
- Added 180px left spacer to match track controls sidebar
- Playhead marker now aligns perfectly with waveform

Automation header improvements:
- Dropdown has fixed width (min-w-[120px] max-w-[200px]) instead of flex-1
- Eye icon (show/hide) is now positioned absolutely on the right
- Cleaner, more compact header layout

Visual consistency:
- Removed redundant border-b from AutomationLane (handled by parent)
- Automation lane and waveform now perfectly aligned vertically

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/automation/AutomationHeader.tsx |  10 +-
 components/automation/AutomationLane.tsx   |   2 +-
 components/tracks/Track.tsx                | 132 +++++++++++----------
 3 files changed, 75 insertions(+), 69 deletions(-)

diff --git a/components/automation/AutomationHeader.tsx b/components/automation/AutomationHeader.tsx
index a7a2b96..000113b 100644
--- a/components/automation/AutomationHeader.tsx
+++ b/components/automation/AutomationHeader.tsx
@@ -69,7 +69,7 @@ export function AutomationHeader({
   return (
     <div
       className={cn(
-        'flex items-center gap-2 px-2 py-1 bg-muted/50 border-b border-border/30 flex-shrink-0',
+        'relative flex items-center gap-2 px-2 py-1 bg-muted/50 border-b border-border/30 flex-shrink-0',
         className
       )}
     >
@@ -86,7 +86,7 @@ export function AutomationHeader({
         <select
           value={selectedParameterId}
           onChange={(e) => onParameterChange?.(e.target.value)}
-          className="text-xs font-medium text-foreground flex-1 min-w-0 bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary"
+          className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary"
         >
           {availableParameters.map((param) => (
             <option key={param.id} value={param.id}>
@@ -95,7 +95,7 @@ export function AutomationHeader({
           ))}
         </select>
       ) : (
-        <span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">
+        <span className="text-xs font-medium text-foreground truncate">
           {parameterName}
         </span>
       )}
@@ -142,13 +142,13 @@ export function AutomationHeader({
         </div>
       )}
 
-      {/* Show/hide toggle */}
+      {/* Show/hide toggle - Positioned absolutely on the right */}
       <Button
         variant="ghost"
         size="icon-sm"
         onClick={onToggleVisible}
         title={visible ? 'Hide automation' : 'Show automation'}
-        className="h-5 w-5 flex-shrink-0"
+        className="absolute right-2 h-5 w-5 flex-shrink-0"
       >
         {visible ? (
           <Eye className="h-3 w-3" />
diff --git a/components/automation/AutomationLane.tsx b/components/automation/AutomationLane.tsx
index 14c4e06..8451024 100644
--- a/components/automation/AutomationLane.tsx
+++ b/components/automation/AutomationLane.tsx
@@ -294,7 +294,7 @@ export function AutomationLane({
   if (!lane.visible) return null;
 
   return (
-    <div className={cn('flex flex-col border-b border-border/50', className)} style={{ height: lane.height + 30 }}>
+    <div className={cn('flex flex-col', className)} style={{ height: lane.height + 30 }}>
       {/* Header */}
       <AutomationHeader
         parameterName={lane.parameterName}
diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index d8989a6..c745ba2 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -766,69 +766,75 @@ export function Track({
         }
 
         return selectedLane ? (
-          <div className="bg-background/30">
-            <AutomationLane
-              key={selectedLane.id}
-              lane={selectedLane}
-              duration={duration}
-              zoom={zoom}
-              currentTime={currentTime}
-              availableParameters={availableParameters}
-              selectedParameterId={selectedParameterId}
-              onParameterChange={(parameterId) => {
-                onUpdateTrack(track.id, {
-                  automation: { ...track.automation, selectedParameterId: parameterId },
-                });
-              }}
-              onUpdateLane={(updates) => {
-                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === selectedLane.id ? { ...l, ...updates } : l
-                );
-                onUpdateTrack(track.id, {
-                  automation: { ...track.automation, lanes: updatedLanes },
-                });
-              }}
-              onAddPoint={(time, value) => {
-                const newPoint = createAutomationPoint({
-                  time,
-                  value,
-                  curve: 'linear',
-                });
-                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === selectedLane.id
-                    ? { ...l, points: [...l.points, newPoint] }
-                    : l
-                );
-                onUpdateTrack(track.id, {
-                  automation: { ...track.automation, lanes: updatedLanes },
-                });
-              }}
-              onUpdatePoint={(pointId, updates) => {
-                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === selectedLane.id
-                    ? {
-                        ...l,
-                        points: l.points.map((p) =>
-                          p.id === pointId ? { ...p, ...updates } : p
-                        ),
-                      }
-                    : l
-                );
-                onUpdateTrack(track.id, {
-                  automation: { ...track.automation, lanes: updatedLanes },
-                });
-              }}
-              onRemovePoint={(pointId) => {
-                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === selectedLane.id
-                    ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
-                    : l
-                );
-                onUpdateTrack(track.id, {
-                  automation: { ...track.automation, lanes: updatedLanes },
-                });
-              }}
-            />
+          <div className="flex border-b border-border">
+            {/* Left: Sidebar spacer to align with track controls */}
+            <div className="w-[180px] flex-shrink-0 bg-background/30" />
+
+            {/* Right: Automation lane matching waveform width */}
+            <div className="flex-1">
+              <AutomationLane
+                key={selectedLane.id}
+                lane={selectedLane}
+                duration={duration}
+                zoom={zoom}
+                currentTime={currentTime}
+                availableParameters={availableParameters}
+                selectedParameterId={selectedParameterId}
+                onParameterChange={(parameterId) => {
+                  onUpdateTrack(track.id, {
+                    automation: { ...track.automation, selectedParameterId: parameterId },
+                  });
+                }}
+                onUpdateLane={(updates) => {
+                  const updatedLanes = track.automation.lanes.map((l) =>
+                    l.id === selectedLane.id ? { ...l, ...updates } : l
+                  );
+                  onUpdateTrack(track.id, {
+                    automation: { ...track.automation, lanes: updatedLanes },
+                  });
+                }}
+                onAddPoint={(time, value) => {
+                  const newPoint = createAutomationPoint({
+                    time,
+                    value,
+                    curve: 'linear',
+                  });
+                  const updatedLanes = track.automation.lanes.map((l) =>
+                    l.id === selectedLane.id
+                      ? { ...l, points: [...l.points, newPoint] }
+                      : l
+                  );
+                  onUpdateTrack(track.id, {
+                    automation: { ...track.automation, lanes: updatedLanes },
+                  });
+                }}
+                onUpdatePoint={(pointId, updates) => {
+                  const updatedLanes = track.automation.lanes.map((l) =>
+                    l.id === selectedLane.id
+                      ? {
+                          ...l,
+                          points: l.points.map((p) =>
+                            p.id === pointId ? { ...p, ...updates } : p
+                          ),
+                        }
+                      : l
+                  );
+                  onUpdateTrack(track.id, {
+                    automation: { ...track.automation, lanes: updatedLanes },
+                  });
+                }}
+                onRemovePoint={(pointId) => {
+                  const updatedLanes = track.automation.lanes.map((l) =>
+                    l.id === selectedLane.id
+                      ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
+                      : l
+                  );
+                  onUpdateTrack(track.id, {
+                    automation: { ...track.automation, lanes: updatedLanes },
+                  });
+                }}
+              />
+            </div>
           </div>
         ) : null;
       })()}