feat: increase max package compares to 10

[graphieros]

Resolves #2289

• increase max comparisons to 10
• refactor to refer to the same MAX_PACKAGE_SELECTION constant
• do not use a fix height of line / sparkline container in compare page

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 27, 2026 3:11pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 27, 2026 3:11pm
npmx-lunaria	Ignored		Mar 27, 2026 3:11pm

[coderabbitai]

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: b799a70f-ad7c-4fa6-95cc-8fcf86fde91f

📥 Commits

Reviewing files that changed from the base of the PR and between 4a18344 and ae88cc7.

📒 Files selected for processing (1)

• test/nuxt/components/compare/PackageSelector.spec.ts

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

• test/nuxt/components/compare/PackageSelector.spec.ts

---

📝 Walkthrough

Walkthrough

The pull request increases the selectable package limit from 4 to 10 by updating MAX_PACKAGE_SELECTION in app/composables/usePackageSelection.ts and replacing local maxPackages usages with that constant across the compare flow. PackageSelector.vue now falls back to MAX_PACKAGE_SELECTION when props.max is unset. compare.vue uses the shared constant for parsing, slicing and the “no dependency” column logic. TrendsChart.vue template class binding for panel height was adjusted to omit fixed height when isSparklineLayout is true or the component is not in a modal.

Possibly related PRs

• fix: handle CLS issues in chart modal #2032: Modifies TrendsChart.vue chart container height/class binding based on layout and modal state.
• fix: refine compare grid header layout #2072: Changes compare page package-limit logic and PackageSelector usage to rely on a shared constant instead of a hard-coded value.
• feat: compare download charts with sparklines #2273: Introduces/aligns isSparklineLayout handling in charts, matching the conditional height removal in TrendsChart.vue.

Suggested labels

front, needs review

Suggested reviewers

• alexdln
• serhalp
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description directly addresses the changeset, detailing the increase to 10 max comparisons, refactoring to use a constant, and removing fixed heights.
Linked Issues check	✅ Passed	The PR successfully implements the core requirement of issue #2289 by increasing max package comparisons from 4 to 10, refactoring to use MAX_PACKAGE_SELECTION constant, and removing fixed height constraints.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the requirements: increasing the package limit to 10, centralising the constant, and adjusting container heights for sparkline layout compatibility.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch increase-max-number-of-packages-to-compare

---

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: 1a7f4891-3fce-43e3-b202-1c64eb851a3d

📥 Commits

Reviewing files that changed from the base of the PR and between e0874d3 and 4a18344.

📒 Files selected for processing (1)

• test/nuxt/components/compare/PackageSelector.spec.ts

[codecov]

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!