Adjusted compare grid to allow layout to eventually fit to more than 4 packages at once.

Author: mihaizaurus

app/components/Compare/ComparisonGrid.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 
 /** Total column count including the optional no-dep column */
 const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0))
+const visibleColumns = computed(() => Math.min(totalColumns.value, 4))
 
 /** Compute plain-text tooltip for a replacement column */
 function getReplacementTooltip(col: ComparisonGridColumn): string {
@@ -28,10 +29,16 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 
 <template>
   <div class="overflow-x-auto">
-    <div class="comparison-grid" :style="{ '--package-count': totalColumns }">
+    <div
+      class="comparison-grid"
+      :style="{
+        '--package-count': totalColumns,
+        '--visible-columns': visibleColumns,
+      }"
+    >
       <!-- Header row -->
       <div class="comparison-header">
-        <div class="comparison-label" />
+        <div class="comparison-label relative bg-bg" />
 
         <!-- Package columns -->
         <div
@@ -105,20 +112,30 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 
 <style scoped>
 .comparison-grid {
+  --label-column-width: 140px;
+  --package-column-width: calc((100% - var(--label-column-width)) / var(--visible-columns));
   display: grid;
   gap: 0;
   grid-template-columns:
-    minmax(110px, 150px)
-    repeat(var(--package-count), minmax(0, 1fr));
+    var(--label-column-width)
+    repeat(var(--package-count), minmax(var(--package-column-width), var(--package-column-width)));
 }
 
 .comparison-header {
   display: contents;
 }
 
 .comparison-header > .comparison-label {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  z-index: 3;
+}
+
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+  isolation: isolate;
 }
 
 .comparison-header > .comparison-cell-header {

app/components/Compare/FacetRow.vue

@@ -88,7 +88,9 @@ function isCellLoading(index: number): boolean {
 <template>
   <div class="contents">
     <!-- Label cell -->
-    <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
+    <div
+      class="comparison-label relative bg-bg flex items-center gap-1.5 px-4 py-3 border-b border-border"
+    >
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
         <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
@@ -151,3 +153,13 @@ function isCellLoading(index: number): boolean {
     </div>
   </div>
 </template>
+
+<style lang="css" scoped>
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+}
+</style>

app/pages/compare.vue

@@ -11,6 +11,7 @@ const { locale } = useI18n()
 const router = useRouter()
 const canGoBack = useCanGoBack()
 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 +24,7 @@ const packages = computed({
       .split(',')
       .map(p => p.trim())
       .filter(p => p.length > 0)
-      .slice(0, 4)
+      .slice(0, maxPackages)
   },
   set(value) {
     packagesParam.value = value.length > 0 ? value.join(',') : ''
@@ -61,12 +62,12 @@ const gridColumns = computed(() =>
 
 // Whether we can add the no-dep column (not already added and have room)
 const canAddNoDep = computed(
-  () => packages.value.length < 4 && !packages.value.includes(NO_DEPENDENCY_ID),
+  () => packages.value.length < maxPackages && !packages.value.includes(NO_DEPENDENCY_ID),
 )
 
 // Add "no dependency" column to comparison
 function addNoDep() {
-  if (packages.value.length >= 4) return
+  if (packages.value.length >= maxPackages) return
   if (packages.value.includes(NO_DEPENDENCY_ID)) return
   packages.value = [...packages.value, NO_DEPENDENCY_ID]
 }
@@ -191,7 +192,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="4" />
+        <ComparePackageSelector v-model="packages" :max="maxPackages" />
 
         <!-- "No dep" replacement suggestions (native, simple) -->
         <div v-if="noDepSuggestions.length > 0" class="mt-3 space-y-2">