fix(ui): reduce badge width overestimation in fallback text measurement by MathurAditya724 · Pull Request #2199 · npmx-dev/npmx.dev

MathurAditya724 · 2026-03-22T16:32:28Z

🔗 Linked issue

🧭 Context

Badge widths looked too wide in production for long values (for example https://main.npmx.dev/api/registry/badge/engines/vitest), while local dev looked tighter.

The root cause is that when exact canvas measurement is unavailable, the fallback used a fixed per-character width, which overestimates strings containing many narrow characters (spaces, separators, punctuation).

📚 Description

This updates the badge text-width fallback logic to be less aggressive and more realistic, replace the fixed-width fallback with a small character-class estimator

…izing

vercel · 2026-03-22T16:32:33Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Mar 23, 2026 11:36pm
npmx.dev	Ready	Preview, Comment	Mar 23, 2026 11:36pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 23, 2026 11:36pm

coderabbitai · 2026-03-22T16:35:02Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 00e24754-1ea2-4b06-abaf-3f1bf36abb6c

📥 Commits

Reviewing files that changed from the base of the PR and between 333d12b and f452ac1.

📒 Files selected for processing (1)

server/api/registry/badge/[type]/[...pkg].get.ts

🚧 Files skipped from review as they are similar to previous changes (1)

server/api/registry/badge/[type]/[...pkg].get.ts

📝 Walkthrough

Walkthrough

Replaces constant-based fallback width multipliers with a character-driven heuristic estimateTextWidth(text, fallbackFont) that classifies characters (narrow/medium/digit/uppercase/other) and applies font-specific coefficients for 'default' and 'shieldsio'. measureDefaultTextWidth now accepts an optional fallbackExtraPadding and, when canvas measurement is unavailable, falls back to estimateTextWidth(..., 'default') + badge horizontal padding + extra padding, clamped to MIN_BADGE_TEXT_WIDTH. measureShieldsTextLength now uses estimateTextWidth(..., 'shieldsio'). The value segment rendering uses FALLBACK_VALUE_EXTRA_PADDING_X = 4 for fallback padding.

Possibly related PRs

npmx-dev/npmx.dev PR 908: Introduced per-strategy character-width constants and an optional charWidth parameter in the same badge measurement file.
npmx-dev/npmx.dev PR 1486: Reworked badge text-width measurement in the same endpoint, replacing fixed per-character width logic with a different measurement approach.
npmx-dev/npmx.dev PR 1584: Adjusted badge text-measurement and fallback validation in the same file, tightening measured-width checks and fallback behavior.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the root cause of badge width overestimation and the solution implemented via character-class estimation.
Linked Issues check	✅ Passed	The PR directly addresses issue `#2187` by replacing fixed-width fallback with character-class estimator to reduce badge width overestimation, matching the objective to prevent fallback logic from overestimating text width.
Out of Scope Changes check	✅ Passed	All changes are scoped to the badge text-width fallback logic in a single file, directly addressing the identified root cause of badge width overestimation without introducing unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

server/api/registry/badge/[type]/[...pkg].get.ts (1)

75-103: Externalise width coefficients and add a brief calibration note.

The embedded literals (3, 5, 6, 7, 5.5) make future tuning brittle. Moving them into named constants (per font profile) will make this safer to adjust.

♻️ Proposed refactor

+const FALLBACK_WIDTHS = {
+  default: {
+    narrow: 3,
+    medium: 5,
+    digit: 6,
+    uppercase: 7,
+    other: 6,
+  },
+  shieldsio: {
+    narrow: 3,
+    medium: 5,
+    digit: 6,
+    uppercase: 7,
+    other: 5.5,
+  },
+} as const
+
 function estimateTextWidth(text: string, fallbackFont: 'default' | 'shieldsio'): number {
+  // Heuristic coefficients tuned to keep fallback rendering close to canvas metrics.
+  const widths = FALLBACK_WIDTHS[fallbackFont]
   let totalWidth = 0
 
   for (const character of text) {
     if (NARROW_CHARS.has(character)) {
-      totalWidth += 3
+      totalWidth += widths.narrow
       continue
     }
 
     if (MEDIUM_CHARS.has(character)) {
-      totalWidth += 5
+      totalWidth += widths.medium
       continue
     }
 
     if (/\d/.test(character)) {
-      totalWidth += 6
+      totalWidth += widths.digit
       continue
     }
 
     if (/[A-Z]/.test(character)) {
-      totalWidth += 7
+      totalWidth += widths.uppercase
       continue
     }
 
-    totalWidth += fallbackFont === 'shieldsio' ? 5.5 : 6
+    totalWidth += widths.other
   }
 
   return Math.max(1, Math.round(totalWidth))
 }

As per coding guidelines "Add comments only to explain complex logic or non-obvious implementations".

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b026675c-7f1b-4eb9-ade0-52af6d8595bb

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 9c66f01.

📒 Files selected for processing (1)

server/api/registry/badge/[type]/[...pkg].get.ts

codecov · 2026-03-22T16:45:12Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai

🧹 Nitpick comments (1)

server/api/registry/badge/[type]/[...pkg].get.ts (1)
90-98: Consider pre-compiling regex patterns outside the loop.

The regex literals /\d/ and /[A-Z]/ are recreated on each character iteration. For short badge text this has negligible impact, but pre-compiling them as module-level constants would be marginally more efficient and consistent with the existing NARROW_CHARS and MEDIUM_CHARS sets.
♻️ Optional: pre-compile regex patterns
 const MEDIUM_CHARS = new Set([
   // ... existing entries
 ])
+const DIGIT_PATTERN = /\d/
+const UPPERCASE_PATTERN = /[A-Z]/
 
 function estimateTextWidth(text: string, fallbackFont: 'default' | 'shieldsio'): number {
   // ...
-    if (/\d/.test(character)) {
+    if (DIGIT_PATTERN.test(character)) {
       totalWidth += 6
       continue
     }
 
-    if (/[A-Z]/.test(character)) {
+    if (UPPERCASE_PATTERN.test(character)) {
       totalWidth += 7
       continue
     }
   // ...
 }

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3407ba18-2f99-4d5b-9aa3-a9316d542e95

📥 Commits

Reviewing files that changed from the base of the PR and between 9c66f01 and a66454e.

📒 Files selected for processing (1)

server/api/registry/badge/[type]/[...pkg].get.ts

… constants

MathurAditya724 · 2026-03-22T16:54:04Z

Check this out - https://npmxdev-git-fork-mathuraditya724-patch-2-npmx.vercel.app/api/registry/badge/engines/vitest

trueberryless

Thanks for your contribution and the conveniently provided link to a working example!
The changes look good to me and allow for flexible adjustments 🙌

In the future, we might wanna rethink the generation and maybe get inspired by shields.io, but for this bug fix, that would be too much...

ghostdevv

I don't love the workaround but it seems to work so let's ship it and figure it out later!

fix(badge): make text-width fallback less aggressive for consistent s…

19a09bc

…izing

[autofix.ci] apply automated fixes

9c66f01

vercel bot deployed to Preview – npmx.dev March 22, 2026 16:35 View deployment

coderabbitai bot reviewed Mar 22, 2026

View reviewed changes

fix(badge): add breathing room for fallback value segment

a66454e

vercel bot deployed to Preview – npmx.dev March 22, 2026 16:45 View deployment

coderabbitai bot reviewed Mar 22, 2026

View reviewed changes

MathurAditya724 added 2 commits March 22, 2026 22:17

chore(badge): resolve coderabbit nitpick by extracting fallback width…

3f6e41c

… constants

chore: minor padding update

333d12b

vercel bot deployed to Preview – npmx.dev March 22, 2026 16:50 View deployment

trueberryless mentioned this pull request Mar 23, 2026

fix(ui): register Geist font with canvas to fix badge width measurement #2196

Closed

4 tasks

trueberryless approved these changes Mar 23, 2026

View reviewed changes

ghostdevv approved these changes Mar 23, 2026

View reviewed changes

Merge branch 'main' into patch-2

f452ac1

ghostdevv approved these changes Mar 23, 2026

View reviewed changes

ghostdevv enabled auto-merge March 23, 2026 23:34

vercel bot deployed to Preview – docs.npmx.dev March 23, 2026 23:36 View deployment

vercel bot deployed to Preview – npmx.dev March 23, 2026 23:36 View deployment

ghostdevv added this pull request to the merge queue Mar 23, 2026

Merged via the queue into npmx-dev:main with commit 1fd2d53 Mar 23, 2026
20 checks passed

github-actions bot mentioned this pull request Mar 23, 2026

chore: release v0.6.0 #2240

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): reduce badge width overestimation in fallback text measurement#2199

fix(ui): reduce badge width overestimation in fallback text measurement#2199
ghostdevv merged 6 commits intonpmx-dev:mainfrom
MathurAditya724:patch-2

MathurAditya724 commented Mar 22, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 22, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 22, 2026 •

edited

Loading

Walkthrough

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Uh oh!

codecov bot commented Mar 22, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

MathurAditya724 commented Mar 22, 2026

Uh oh!

trueberryless left a comment

Uh oh!

ghostdevv left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

MathurAditya724 commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Mar 22, 2026

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

MathurAditya724 commented Mar 22, 2026

Uh oh!

trueberryless left a comment

Choose a reason for hiding this comment

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MathurAditya724 commented Mar 22, 2026 •

edited

Loading

vercel bot commented Mar 22, 2026 •

edited

Loading

coderabbitai bot commented Mar 22, 2026 •

edited

Loading