feat: increase max package compares to 10 (#2294)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: graphieros

app/components/Compare/PackageSelector.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   max?: number
 }>()
 
-const maxPackages = computed(() => props.max ?? 4)
+const maxPackages = computed(() => props.max ?? MAX_PACKAGE_SELECTION)
 
 // Input state
 const inputValue = shallowRef('')

app/components/Package/TrendsChart.vue

@@ -1896,11 +1896,13 @@ const isSparklineLayout = computed({
       role="region"
       aria-labelledby="trends-chart-title"
       :class="
-        isMobile === false && width > 0
-          ? showCorrectionControls
-            ? 'h-[491px]'
-            : 'h-[567px]'
-          : 'min-h-[260px]'
+        isSparklineLayout || !inModal
+          ? undefined
+          : isMobile === false && width > 0
+            ? showCorrectionControls
+              ? 'h-[491px]'
+              : 'h-[567px]'
+            : 'min-h-[260px]'
       "
     >
       <ClientOnly v-if="chartData.dataset">

app/composables/usePackageSelection.ts

@@ -1,4 +1,4 @@
-export const MAX_PACKAGE_SELECTION = 4
+export const MAX_PACKAGE_SELECTION = 10
 
 export function usePackageSelection() {
   const selectedPackagesParam = useRouteQuery<string>('selection', '', { mode: 'replace' })

app/pages/compare.vue

@@ -10,7 +10,6 @@ definePageMeta({
 
 const { locale } = useI18n()
 const { copied, copy } = useClipboard({ copiedDuring: 2000 })
-const maxPackages = 4
 
 // Sync packages with URL query param (stable ref - doesn't change on other query changes)
 const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' })
@@ -23,7 +22,7 @@ const packages = computed({
       .split(',')
       .map(p => p.trim())
       .filter(p => p.length > 0)
-      .slice(0, maxPackages)
+      .slice(0, MAX_PACKAGE_SELECTION)
   },
   set(value) {
     packagesParam.value = value.length > 0 ? value.join(',') : ''
@@ -61,12 +60,12 @@ const gridColumns = computed(() =>
 
 // Whether we can add the no-dep column (not already added and have room)
 const canAddNoDep = computed(
-  () => packages.value.length < maxPackages && !packages.value.includes(NO_DEPENDENCY_ID),
+  () => packages.value.length < MAX_PACKAGE_SELECTION && !packages.value.includes(NO_DEPENDENCY_ID),
 )
 
 // Add "no dependency" column to comparison
 function addNoDep() {
-  if (packages.value.length >= maxPackages) return
+  if (packages.value.length >= MAX_PACKAGE_SELECTION) return
   if (packages.value.includes(NO_DEPENDENCY_ID)) return
   packages.value = [...packages.value, NO_DEPENDENCY_ID]
 }
@@ -183,7 +182,7 @@ useSeoMeta({
         <h2 id="packages-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
           {{ $t('compare.packages.section_packages') }}
         </h2>
-        <ComparePackageSelector v-model="packages" :max="maxPackages" />
+        <ComparePackageSelector v-model="packages" :max="MAX_PACKAGE_SELECTION" />
 
         <!-- "No dep" replacement suggestions (native, simple) -->
         <div v-if="noDepSuggestions.length > 0" class="mt-3 space-y-2">

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

@@ -185,8 +185,8 @@ describe('PackageSelector', () => {
     it('respects max packages limit', async () => {
       const component = await mountSuspended(PackageSelector, {
         props: {
-          modelValue: ['a', 'b', 'c', 'd'],
-          max: 4,
+          modelValue: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
+          max: 10,
         },
       })
 
@@ -200,19 +200,19 @@ describe('PackageSelector', () => {
       const component = await mountSuspended(PackageSelector, {
         props: {
           modelValue: ['lodash', 'underscore'],
-          max: 4,
+          max: 10,
         },
       })
 
       expect(component.text()).toContain('2')
-      expect(component.text()).toContain('4')
+      expect(component.text()).toContain('10')
     })
 
     it('shows add hint when less than 2 packages', async () => {
       const component = await mountSuspended(PackageSelector, {
         props: {
           modelValue: ['lodash'],
-          max: 4,
+          max: 10,
         },
       })
 
@@ -222,15 +222,15 @@ describe('PackageSelector', () => {
   })
 
   describe('max prop', () => {
-    it('defaults to 4 when not provided', async () => {
+    it('defaults to 10 when not provided', async () => {
       const component = await mountSuspended(PackageSelector, {
         props: {
           modelValue: [],
         },
       })
 
-      // Should show max of 4 in hint
-      expect(component.text()).toContain('4')
+      // Should show max of 10 in hint
+      expect(component.text()).toContain('10')
     })
 
     it('uses provided max value', async () => {