valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Sebastian Krüger
2025-11-19 01:00:57 +01:00
parent 34452862ca
commit 33be21295e
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/controls/MasterFader.tsx
View File

@@ -169,7 +169,7 @@ export function MasterFader({
</div> </div>
{/* Value and Level Display (Right) */} {/* 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 */} {/* Current dB Value */}
<div className={cn( <div className={cn(
'font-bold text-[11px]', 'font-bold text-[11px]',
@@ -177,7 +177,7 @@ export function MasterFader({
valueDb > -6 ? 'text-yellow-500' : valueDb > -6 ? 'text-yellow-500' :
'text-green-500' 'text-green-500'
)}> )}>
{valueDb > -60 ? `${valueDb.toFixed(1)}` : '-∞'} {valueDb > -60 ? `${valueDb.toFixed(2)}` : '-∞'}
</div> </div>
{/* Spacer */} {/* Spacer */}
@@ -192,7 +192,7 @@ export function MasterFader({
peakDb > -6 ? 'text-yellow-500' : peakDb > -6 ? 'text-yellow-500' :
'text-green-500' 'text-green-500'
)}> )}>
{peakDb > -60 ? `${peakDb.toFixed(1)}` : '-∞'} {peakDb > -60 ? `${peakDb.toFixed(2)}` : '-∞'}
</span> </span>
</div> </div>
@@ -201,11 +201,11 @@ export function MasterFader({
<span className="text-muted-foreground/60">RM</span> <span className="text-muted-foreground/60">RM</span>
<span className={cn( <span className={cn(
'font-mono text-[10px]', 'font-mono text-[10px]',
rmsDb > -3 ? 'text-red-400' : rmsDb > -3 ? 'text-red-500' :
rmsDb > -6 ? 'text-yellow-400' : rmsDb > -6 ? 'text-yellow-500' :
'text-green-400' 'text-green-500'
)}> )}>
{rmsDb > -60 ? `${rmsDb.toFixed(1)}` : '-∞'} {rmsDb > -60 ? `${rmsDb.toFixed(2)}` : '-∞'}
</span> </span>
</div> </div>

4
components/tracks/TrackFader.tsx
View File

@@ -163,12 +163,12 @@ export function TrackFader({
<div className="flex flex-col justify-center items-start text-[9px] font-mono"> <div className="flex flex-col justify-center items-start text-[9px] font-mono">
{/* Current dB Value */} {/* Current dB Value */}
<div className={cn( <div className={cn(
'font-bold text-[10px]', 'font-bold text-[10px] w-[32px]',
valueDb > -3 ? 'text-red-500' : valueDb > -3 ? 'text-red-500' :
valueDb > -6 ? 'text-yellow-500' : valueDb > -6 ? 'text-yellow-500' :
'text-green-500' 'text-green-500'
)}> )}>
{valueDb > -60 ? `${valueDb.toFixed(1)}` : '-∞'} {valueDb > -60 ? `${valueDb.toFixed(2)}` : '-∞'}
</div> </div>
</div> </div>
</div> </div>