fix: clamp feature adoption percentage text to 0-100%, not just the progress bar

Co-Authored-By: mantra <mantra@stack-auth.com>
This commit is contained in:
Devin AI 2026-06-19 00:54:36 +00:00
parent 13b796c0ea
commit 3c803a8915

View File

@ -583,8 +583,7 @@ function FeatureAdoption({ features, totalProjects }: { features: Array<{ featur
{features.map((feature) => {
const meta = FEATURE_META.get(feature.feature);
const Icon = meta?.icon ?? ChartLineUpIcon;
const pct = Math.round((feature.projects_using / denominator) * 100);
const pctClamped = Math.max(0, Math.min(100, pct));
const pctClamped = Math.max(0, Math.min(100, Math.round((feature.projects_using / denominator) * 100)));
return (
<div key={feature.feature} className="flex flex-col gap-1.5">
<div className="flex items-center justify-between gap-2 text-sm">
@ -592,7 +591,7 @@ function FeatureAdoption({ features, totalProjects }: { features: Array<{ featur
<Icon className="h-4 w-4 text-muted-foreground" weight="regular" />
{meta?.label ?? feature.feature}
</span>
<span className="tabular-nums text-muted-foreground">{formatNumber(feature.projects_using)} <span className="text-xs">({pct}%)</span></span>
<span className="tabular-nums text-muted-foreground">{formatNumber(feature.projects_using)} <span className="text-xs">({pctClamped}%)</span></span>
</div>
<div className="h-1.5 w-full overflow-hidden rounded-full bg-foreground/[0.06]">
<div className="h-full rounded-full bg-foreground/30" style={{ width: `${pctClamped}%` }} />