fix: add fixed width to fader labels and show 2 decimal places

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>
This commit is contained in:
2025-11-19 01:00:57 +01:00
parent 34452862ca
commit 33be21295e
2 changed files with 9 additions and 9 deletions

View File

@@ -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>

View File

@@ -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>