From 33be21295e583f104593f2b9e67bada96c967859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 01:00:57 +0100
Subject: [PATCH] fix: add fixed width to fader labels and show 2 decimal
 places
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added fixed widths to prevent component movement when values change:
- TrackFader: w-[32px] for value display
- MasterFader: w-[36px] for value/peak/RMS display

Changed decimal precision from .toFixed(1) to .toFixed(2) for more
accurate dB readings (e.g., -3.11 instead of -3.1).

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/controls/MasterFader.tsx | 14 +++++++-------
 components/tracks/TrackFader.tsx    |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/controls/MasterFader.tsx b/components/controls/MasterFader.tsx
index 1e7b6fe..b73619a 100644
--- a/components/controls/MasterFader.tsx
+++ b/components/controls/MasterFader.tsx
@@ -169,7 +169,7 @@ export function MasterFader({
       </div>
 
       {/* Value and Level Display (Right) */}
-      <div className="flex flex-col justify-between items-start text-[9px] font-mono py-1">
+      <div className="flex flex-col justify-between items-start text-[9px] font-mono py-1 w-[36px]">
         {/* Current dB Value */}
         <div className={cn(
           'font-bold text-[11px]',
@@ -177,7 +177,7 @@ export function MasterFader({
           valueDb > -6 ? 'text-yellow-500' :
           'text-green-500'
         )}>
-          {valueDb > -60 ? `${valueDb.toFixed(1)}` : '-∞'}
+          {valueDb > -60 ? `${valueDb.toFixed(2)}` : '-∞'}
         </div>
 
         {/* Spacer */}
@@ -192,7 +192,7 @@ export function MasterFader({
             peakDb > -6 ? 'text-yellow-500' :
             'text-green-500'
           )}>
-            {peakDb > -60 ? `${peakDb.toFixed(1)}` : '-∞'}
+            {peakDb > -60 ? `${peakDb.toFixed(2)}` : '-∞'}
           </span>
         </div>
 
@@ -201,11 +201,11 @@ export function MasterFader({
           <span className="text-muted-foreground/60">RM</span>
           <span className={cn(
             'font-mono text-[10px]',
-            rmsDb > -3 ? 'text-red-400' :
-            rmsDb > -6 ? 'text-yellow-400' :
-            'text-green-400'
+            rmsDb > -3 ? 'text-red-500' :
+            rmsDb > -6 ? 'text-yellow-500' :
+            'text-green-500'
           )}>
-            {rmsDb > -60 ? `${rmsDb.toFixed(1)}` : '-∞'}
+            {rmsDb > -60 ? `${rmsDb.toFixed(2)}` : '-∞'}
           </span>
         </div>
 
diff --git a/components/tracks/TrackFader.tsx b/components/tracks/TrackFader.tsx
index 73513b1..e880912 100644
--- a/components/tracks/TrackFader.tsx
+++ b/components/tracks/TrackFader.tsx
@@ -163,12 +163,12 @@ export function TrackFader({
       <div className="flex flex-col justify-center items-start text-[9px] font-mono">
         {/* Current dB Value */}
         <div className={cn(
-          'font-bold text-[10px]',
+          'font-bold text-[10px] w-[32px]',
           valueDb > -3 ? 'text-red-500' :
           valueDb > -6 ? 'text-yellow-500' :
           'text-green-500'
         )}>
-          {valueDb > -60 ? `${valueDb.toFixed(1)}` : '-∞'}
+          {valueDb > -60 ? `${valueDb.toFixed(2)}` : '-∞'}
         </div>
       </div>
     </div>