feat: increase max package compares to 10

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

@@ -1895,7 +1895,7 @@ const isSparklineLayout = computed({
     <div
       role="region"
       aria-labelledby="trends-chart-title"
-      :class="
+      :class="isSparklineLayout || !inModal ? undefined:
         isMobile === false && width > 0
           ? showCorrectionControls
             ? 'h-[491px]'

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">