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:
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user