fix: avoid using slash as a separator between two numbers

[serhalp]

🔗 Linked issue

N/A

🧭 Context

A slash between numbers implies some sort of fraction or ratio. It isn't intuitive what it means between two dependency counts and between sizes.

This has been bugging me the whole time tbh 😁. I've seen feedback on bsky about this as well, where users didn't know what this information meant (even though there's a tooltip...).

📚 Description

Use parens instead for the total number of transitive deps and for the total install size:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 15, 2026 2:39pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 15, 2026 2:39pm
npmx-lunaria	Ignored		Mar 15, 2026 2:39pm

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR modifies the package page component to adjust how transitive dependencies and install sizes are displayed. Instead of using a "/" separator, total counts are now wrapped in parentheses. When totals are loading, a spinner appears within the parentheses. If data is unavailable, a dash wrapped in parentheses displays instead. These formatting changes apply to both the transitive dependencies section and the install size section.

Possibly related PRs

• fix: deduplicate when dependencies === transitive dependencies #976: Modifies the same dependency and install-size display logic, including how totals and separators are rendered in the package page
• fix: show correct install size for native packages #1357: Modifies the same UI sections for transitive dependency and install-size rendering with related formatting adjustments

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the motivation (slash notation is confusing) and describes the change (replacing slashes with parentheses for displaying dependency counts and install sizes).

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch serhalp/size-separator

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a8dfb435-eb76-40e1-903f-47aac8143612

📥 Commits

Reviewing files that changed from the base of the PR and between 4422cba and 6a17ce3.

📒 Files selected for processing (1)

• app/pages/package/[[org]]/[name].vue

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Handle zero-byte totals explicitly in the install-size branch.

At Line 664, v-else-if="installSize?.totalSize" treats 0 as falsy, so a valid zero total falls through to (-). Use an explicit nullish check.

Suggested fix

-                    <span v-else-if="installSize?.totalSize" dir="ltr">
+                    <span
+                      v-else-if="
+                        installSize?.totalSize !== null &&
+                        installSize?.totalSize !== undefined
+                      "
+                      dir="ltr"
+                    >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<span v-else-if="installSize?.totalSize" dir="ltr">
	<span class="text-fg-subtle">(</span
	>{{ bytesFormatter.format(installSize.totalSize)
	}}<span class="text-fg-subtle">)</span>
	</span>
	<span v-else class="text-fg-subtle">(-)</span>
	<span
	v-else-if="
	installSize?.totalSize !== null &&
	installSize?.totalSize !== undefined
	"
	dir="ltr"
	>
	<span class="text-fg-subtle">(</span
	>{{ bytesFormatter.format(installSize.totalSize)
	}}<span class="text-fg-subtle">)</span>
	</span>
	<span v-else class="text-fg-subtle">(-)</span>