Skip to content

Add tabular-nums to all dynamic numeric displays #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dbochman merged 1 commit into from
Mar 4, 2026
Merged

Add tabular-nums to all dynamic numeric displays #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/analytics/CoreWebVitalsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function CoreWebVitalsCard({ data }: CoreWebVitalsCardProps) {
<div key={vital.key} className="space-y-1">
<div className="flex justify-between text-sm">
<span className="font-medium">{vital.label}</span>
<span className={cn('font-mono', {
<span className={cn('font-mono tabular-nums', {
'text-emerald-500': status === 'good',
'text-amber-500': status === 'warning',
'text-red-500': status === 'critical',
Expand All @@ -112,7 +112,7 @@ export function CoreWebVitalsCard({ data }: CoreWebVitalsCardProps) {
className="h-2"
aria-label={`${vital.label}: ${rawValue}`}
/>
<div className="flex justify-between text-xs text-muted-foreground">
<div className="flex justify-between text-xs text-muted-foreground tabular-nums">
<span>Good: ≤{vital.thresholds.good}{vital.unit}</span>
<span>Poor: &gt;{vital.thresholds.poor}{vital.unit}</span>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/analytics/GitHubBillingCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const GitHubBillingCard = memo(function GitHubBillingCard({ data }: GitHu
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{summary.totalMinutes.toLocaleString()}</div>
<div className="text-2xl font-bold tabular-nums">{summary.totalMinutes.toLocaleString()}</div>
<p className="text-xs text-muted-foreground mt-1">{period.description}</p>
</CardContent>
</Card>
Expand All @@ -55,7 +55,7 @@ export const GitHubBillingCard = memo(function GitHubBillingCard({ data }: GitHu
<DollarSign className="h-4 w-4 text-emerald-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-emerald-500">
<div className="text-2xl font-bold text-emerald-500 tabular-nums">
${summary.totalDiscountAmount.toFixed(2)}
</div>
<p className="text-xs text-muted-foreground mt-1">{savingsPercent}% from free tier</p>
Expand All @@ -70,7 +70,7 @@ export const GitHubBillingCard = memo(function GitHubBillingCard({ data }: GitHu
<DollarSign className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className={`text-2xl font-bold ${summary.totalNetAmount === 0 ? 'text-emerald-500' : ''}`}>
<div className={`text-2xl font-bold tabular-nums ${summary.totalNetAmount === 0 ? 'text-emerald-500' : ''}`}>
${summary.totalNetAmount.toFixed(2)}
</div>
<p className="text-xs text-muted-foreground mt-1">actual spend</p>
Expand Down Expand Up @@ -111,7 +111,7 @@ export const GitHubBillingCard = memo(function GitHubBillingCard({ data }: GitHu
<span className="text-sm font-medium capitalize">{runner} runners</span>
<div className="text-right">
<span className="text-sm tabular-nums">{stats.minutes.toLocaleString()} min</span>
<span className="text-xs text-muted-foreground ml-2">
<span className="text-xs text-muted-foreground ml-2 tabular-nums">
(${stats.grossAmount.toFixed(2)})
</span>
</div>
Expand All @@ -122,7 +122,7 @@ export const GitHubBillingCard = memo(function GitHubBillingCard({ data }: GitHu
<span className="text-sm font-medium">Artifact storage</span>
<div className="text-right">
<span className="text-sm tabular-nums">{storage.gbHours.toFixed(2)} GB-hrs</span>
<span className="text-xs text-muted-foreground ml-2">
<span className="text-xs text-muted-foreground ml-2 tabular-nums">
(${storage.grossAmount.toFixed(2)})
</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/analytics/LighthouseScoresTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function ScoreBadge({ score }: { score: number }) {

return (
<span className={cn(
'inline-flex items-center justify-center w-10 h-6 rounded text-xs font-medium',
'inline-flex items-center justify-center w-10 h-6 rounded text-xs font-medium tabular-nums',
{
'bg-emerald-500/20 text-emerald-600 dark:text-emerald-400': status === 'good',
'bg-amber-500/20 text-amber-600 dark:text-amber-400': status === 'warning',
Expand Down Expand Up @@ -81,8 +81,8 @@ export function LighthouseScoresTable({ data }: LighthouseScoresTableProps) {
<td className="text-center py-2">
<ScoreBadge score={page.bestPractices} />
</td>
<td className="text-right py-2 font-mono text-xs">{page.lcp}</td>
<td className="text-right py-2 font-mono text-xs">{page.cls}</td>
<td className="text-right py-2 font-mono text-xs tabular-nums">{page.lcp}</td>
<td className="text-right py-2 font-mono text-xs tabular-nums">{page.cls}</td>
</tr>
))}
</tbody>
Expand Down
4 changes: 2 additions & 2 deletions src/components/analytics/MetricCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const MetricCard = memo(function MetricCard({ title, value, icon: Icon, s
{Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
</CardHeader>
<CardContent>
<div className={cn('text-2xl font-bold', status && statusColors[status])}>
<div className={cn('text-2xl font-bold tabular-nums', status && statusColors[status])}>
{value}
</div>
<div className="flex items-center gap-2 mt-1">
Expand All @@ -45,7 +45,7 @@ export const MetricCard = memo(function MetricCard({ title, value, icon: Icon, s
) : (
<TrendingDown className="h-3 w-3 mr-1" />
)}
{Math.abs(trend).toFixed(0)}%
<span className="tabular-nums">{Math.abs(trend).toFixed(0)}%</span>
</div>
)}
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/analytics/RumWebVitalsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function RumWebVitalsCard({ data }: RumWebVitalsCardProps) {
<CardHeader>
<CardTitle>Real User Metrics</CardTitle>
<p className="text-sm text-muted-foreground">
Field data from {data.metrics.LCP?.count || data.metrics.FCP?.count || 0}+ sessions
Field data from <span className="tabular-nums">{data.metrics.LCP?.count || data.metrics.FCP?.count || 0}</span>+ sessions
</p>
</CardHeader>
<CardContent className="space-y-4">
Expand All @@ -94,7 +94,7 @@ export function RumWebVitalsCard({ data }: RumWebVitalsCardProps) {
<div key={vital.key} className="space-y-1">
<div className="flex justify-between text-sm">
<span className="font-medium">{vital.key}</span>
<span className={cn('font-mono', {
<span className={cn('font-mono tabular-nums', {
'text-emerald-500': status === 'good',
'text-amber-500': status === 'warning',
'text-red-500': status === 'critical',
Expand All @@ -110,7 +110,7 @@ export function RumWebVitalsCard({ data }: RumWebVitalsCardProps) {
className="h-2"
aria-label={`${vital.key}: ${vital.format(value)}`}
/>
<div className="flex justify-between text-xs text-muted-foreground">
<div className="flex justify-between text-xs text-muted-foreground tabular-nums">
<span>Good: ≤{vital.key === 'CLS' ? vital.thresholds.good : `${vital.thresholds.good}ms`}</span>
<span>Poor: &gt;{vital.key === 'CLS' ? vital.thresholds.poor : `${vital.thresholds.poor}ms`}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/analytics/TrafficQualityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function TrafficQualityCard({ topPages }: TrafficQualityCardProps) {
<div className="space-y-1">
<div className="flex justify-between text-xs text-muted-foreground">
<span>Traffic Composition</span>
<span>{analysis.humanPercentage.toFixed(1)}% human</span>
<span className="tabular-nums">{analysis.humanPercentage.toFixed(1)}% human</span>
</div>
<div className="h-2 rounded-full bg-muted overflow-hidden flex">
{analysis.humanSessions > 0 && (
Expand Down
6 changes: 3 additions & 3 deletions src/components/blog/MTTRBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,12 +134,12 @@ export function MTTRBuilder({ title = 'What Can You Achieve?' }: MTTRBuilderProp
{/* Hero stats */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="text-center p-4 bg-muted/50 rounded-lg border border-border">
<span className="text-3xl font-bold text-foreground">{mttr}</span>
<span className="text-3xl font-bold text-foreground tabular-nums">{mttr}</span>
<span className="text-lg text-muted-foreground ml-1">min</span>
<div className="text-sm text-muted-foreground mt-1">MTTR</div>
</div>
<div className={`text-center p-4 rounded-lg border ${sloBgColor}`}>
<span className={`text-3xl font-bold ${sloColor}`}>
<span className={`text-3xl font-bold tabular-nums ${sloColor}`}>
{achievableSlo.toFixed(2)}%
</span>
<div className="text-sm text-muted-foreground mt-1">achievable SLO</div>
Expand Down Expand Up @@ -191,7 +191,7 @@ export function MTTRBuilder({ title = 'What Can You Achieve?' }: MTTRBuilderProp
</div>

{/* Formula Display */}
<div className="mt-4 p-3 bg-muted/50 rounded-lg border border-border font-mono text-xs sm:text-sm space-y-1">
<div className="mt-4 p-3 bg-muted/50 rounded-lg border border-border font-mono text-xs sm:text-sm space-y-1 tabular-nums">
<div className="text-muted-foreground">
<span className="text-foreground">Effective downtime</span> = {incidents} × {mttr} min × {blastRadius}% ={' '}
<span className="font-semibold text-foreground">{effectiveDowntime.toFixed(0)} min</span>
Expand Down
8 changes: 4 additions & 4 deletions src/components/projects/slo-tool/AchievableTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export function AchievableTab({ result, period }: AchievableTabProps) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">{formatDuration(result.mttrMinutes)}</div>
<div className="text-xl font-bold tabular-nums">{formatDuration(result.mttrMinutes)}</div>
</CardContent>
</Card>

Expand All @@ -162,7 +162,7 @@ export function AchievableTab({ result, period }: AchievableTabProps) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">{formatDuration(result.periodDowntimeMinutes)}</div>
<div className="text-xl font-bold tabular-nums">{formatDuration(result.periodDowntimeMinutes)}</div>
</CardContent>
</Card>

Expand All @@ -173,7 +173,7 @@ export function AchievableTab({ result, period }: AchievableTabProps) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">
<div className="text-xl font-bold tabular-nums">
{formatDuration(
period === 'yearly'
? result.periodDowntimeMinutes
Expand All @@ -192,7 +192,7 @@ export function AchievableTab({ result, period }: AchievableTabProps) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold text-primary">{formatSlo(result.maxAchievableSlo)}</div>
<div className="text-xl font-bold text-primary tabular-nums">{formatSlo(result.maxAchievableSlo)}</div>
</CardContent>
</Card>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/components/projects/slo-tool/BurndownTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ export function BurndownTab({ calculation, config, incidents }: BurndownTabProps
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-muted-foreground">Budget Consumed</p>
<p className="text-2xl font-bold">{formatDuration(consumedMinutes)}</p>
<p className="text-sm text-muted-foreground">
<p className="text-2xl font-bold tabular-nums">{formatDuration(consumedMinutes)}</p>
<p className="text-sm text-muted-foreground tabular-nums">
of {formatDuration(totalBudgetMinutes)} ({consumedPercent.toFixed(1)}%)
</p>
</div>
Expand All @@ -121,17 +121,17 @@ export function BurndownTab({ calculation, config, incidents }: BurndownTabProps
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-muted-foreground">Budget Remaining</p>
<p className={cn('text-2xl font-bold', remainingMinutes <= 0 && 'text-destructive')}>
<p className={cn('text-2xl font-bold tabular-nums', remainingMinutes <= 0 && 'text-destructive')}>
{formatDuration(remainingMinutes)}
</p>
<p className="text-sm text-muted-foreground">{daysRemaining} days left in period</p>
<p className="text-sm text-muted-foreground tabular-nums">{daysRemaining} days left in period</p>
</div>
<div className="rounded-full p-2 bg-primary/10">
<Calendar className="h-5 w-5 text-primary" />
</div>
</div>
<div className="mt-4 flex items-center text-sm text-muted-foreground">
<span>
<span className="tabular-nums">
Day {daysElapsed} of {calculation.periodDays}
</span>
</div>
Expand All @@ -144,7 +144,7 @@ export function BurndownTab({ calculation, config, incidents }: BurndownTabProps
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-muted-foreground">Current Burn Rate</p>
<p className={cn('text-2xl font-bold', burnRateColor)}>{burnMultiplier.toFixed(1)}x</p>
<p className={cn('text-2xl font-bold tabular-nums', burnRateColor)}>{burnMultiplier.toFixed(1)}x</p>
<p className="text-sm text-muted-foreground">
{burnRateText}
{burnMultiplier > 1 ? ' (faster than sustainable)' : ' burn rate'}
Expand Down Expand Up @@ -297,15 +297,15 @@ export function BurndownTab({ calculation, config, incidents }: BurndownTabProps
{simulatedProjection.isOnTrack ? (
<>
At {simulatedMultiplier.toFixed(1)}x, you'll use{' '}
<span className="font-medium text-foreground">
<span className="font-medium text-foreground tabular-nums">
{simulatedProjection.percentConsumedAtEnd.toFixed(0)}%
</span>{' '}
of budget by end of period
</>
) : simulatedProjection.exhaustionDate ? (
<>
At {simulatedMultiplier.toFixed(1)}x, budget exhausted in{' '}
<span className="font-medium text-foreground">
<span className="font-medium text-foreground tabular-nums">
{Math.ceil(simulatedProjection.daysUntilExhaustion!)} days
</span>{' '}
({simulatedProjection.exhaustionDate.toLocaleDateString('en-US', {
Expand Down
2 changes: 1 addition & 1 deletion src/components/projects/slo-tool/SloConfiguration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export function SloConfiguration({ config, onChange }: SloConfigurationProps) {
<span className="font-semibold text-foreground">{formatDuration(totalBudget)}</span>
</p>
<p className="text-xs text-muted-foreground mt-1">
{((1 - config.target / 100) * 100).toFixed(3)}% of {config.period} period
<span className="tabular-nums">{((1 - config.target / 100) * 100).toFixed(3)}%</span> of {config.period} period
</p>
</div>
</CardContent>
Expand Down
8 changes: 4 additions & 4 deletions src/components/projects/slo-tool/TargetTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function TargetTab({ result, achievableResult, period }: TargetTabProps)
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">{formatDuration(result.periodBudgetMinutes)}</div>
<div className="text-xl font-bold tabular-nums">{formatDuration(result.periodBudgetMinutes)}</div>
</CardContent>
</Card>

Expand All @@ -113,7 +113,7 @@ export function TargetTab({ result, achievableResult, period }: TargetTabProps)
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">{formatDuration(result.mttrMinutes)}</div>
<div className="text-xl font-bold tabular-nums">{formatDuration(result.mttrMinutes)}</div>
</CardContent>
</Card>

Expand All @@ -124,7 +124,7 @@ export function TargetTab({ result, achievableResult, period }: TargetTabProps)
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">
<div className="text-xl font-bold tabular-nums">
{!isFinite(result.allowedIncidents)
? '∞'
: result.allowedIncidents < 1
Expand All @@ -144,7 +144,7 @@ export function TargetTab({ result, achievableResult, period }: TargetTabProps)
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl font-bold">
<div className="text-xl font-bold tabular-nums">
{formatDuration(
period === 'yearly'
? result.periodBudgetMinutes
Expand Down