From d0601b2b363adf815f3f17b2dc93fea9d7e9608d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 01:42:25 +0100
Subject: [PATCH] fix: make analyzer cards match master fader width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Constrained analyzer components to 160px width to match
the MasterControls card width, creating better visual alignment
in the master column.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/editor/AudioEditor.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx
index 39c4240..15efa6d 100644
--- a/components/editor/AudioEditor.tsx
+++ b/components/editor/AudioEditor.tsx
@@ -1067,7 +1067,7 @@ export function AudioEditor() {
           </div>
 
           {/* Analyzer Toggle */}
-          <div className="flex gap-1 bg-muted/20 border border-border/50 rounded-md p-1">
+          <div className="flex gap-1 bg-muted/20 border border-border/50 rounded-md p-1 max-w-[160px] mx-auto">
             <button
               onClick={() => setAnalyzerView('frequency')}
               className={`flex-1 px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider transition-all ${
@@ -1091,12 +1091,14 @@ export function AudioEditor() {
           </div>
 
           {/* Analyzer Display */}
-          <div className="flex-1 min-h-[300px]">
-            {analyzerView === 'frequency' ? (
-              <FrequencyAnalyzer analyserNode={masterAnalyser} />
-            ) : (
-              <Spectrogram analyserNode={masterAnalyser} />
-            )}
+          <div className="flex-1 min-h-[300px] flex items-start justify-center">
+            <div className="w-[160px]">
+              {analyzerView === 'frequency' ? (
+                <FrequencyAnalyzer analyserNode={masterAnalyser} />
+              ) : (
+                <Spectrogram analyserNode={masterAnalyser} />
+              )}
+            </div>
           </div>
         </aside>
       </div>