From fa397a1dfecf2917aaeb7451bf8336f558bc1fd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 14:51:26 +0100
Subject: [PATCH] fix: always show level meter and increase track height to
 180px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed layout issues with the level meter:

Track Height:
- Increased DEFAULT_TRACK_HEIGHT from 150px to 180px
- Ensures enough vertical space for all controls without clipping

Level Meter Display:
- Now always visible (not conditional on recording state)
- Shows "Input" with mic icon when track is armed or recording
- Shows "Level" with volume icon when not recording
- Displays appropriate level based on state

This prevents the meter from being cut off and provides consistent
visual feedback for all tracks. Future enhancement: show actual
playback output levels when not recording.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/Track.tsx | 38 +++++++++++++++++++++++--------------
 types/track.ts              |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 1ad77e3..4cf30d0 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -547,21 +547,31 @@ export function Track({
               </span>
             </div>
 
-            {/* Input Level Meter (shown when recording or record-enabled) */}
-            {(track.recordEnabled || isRecording) && (
-              <div className="flex items-center gap-2">
-                <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
-                  <Mic className="h-3 w-3" />
-                  Input
-                </label>
-                <div className="flex-1">
-                  <InputLevelMeter level={recordingLevel} orientation="horizontal" />
-                </div>
-                <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-                  {Math.round(recordingLevel * 100)}%
-                </span>
+            {/* Level Meter (shows input when recording, output level otherwise) */}
+            <div className="flex items-center gap-2">
+              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
+                {track.recordEnabled || isRecording ? (
+                  <>
+                    <Mic className="h-3 w-3" />
+                    Input
+                  </>
+                ) : (
+                  <>
+                    <Volume2 className="h-3 w-3" />
+                    Level
+                  </>
+                )}
+              </label>
+              <div className="flex-1">
+                <InputLevelMeter
+                  level={track.recordEnabled || isRecording ? recordingLevel : 0}
+                  orientation="horizontal"
+                />
               </div>
-            )}
+              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
+                {Math.round((track.recordEnabled || isRecording ? recordingLevel : 0) * 100)}%
+              </span>
+            </div>
           </>
         )}
       </div>
diff --git a/types/track.ts b/types/track.ts
index 64a5cd2..a5ad9e4 100644
--- a/types/track.ts
+++ b/types/track.ts
@@ -59,6 +59,6 @@ export const TRACK_COLORS: Record<TrackColor, string> = {
   gray: 'rgb(156, 163, 175)',
 };
 
-export const DEFAULT_TRACK_HEIGHT = 150;
+export const DEFAULT_TRACK_HEIGHT = 180;
 export const MIN_TRACK_HEIGHT = 60;
 export const MAX_TRACK_HEIGHT = 300;