fix: refine compare grid header layout (#2072)

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 {
@@ -30,32 +31,43 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
   <div class="overflow-x-auto">
     <div
       class="comparison-grid"
-      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
-      :style="{ '--columns': totalColumns }"
+      :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 v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
-          <span class="inline-flex items-center gap-1.5 truncate">
+        <div
+          v-for="col in columns"
+          :key="col.name"
+          class="comparison-cell comparison-cell-header min-w-0"
+        >
+          <div class="flex items-start justify-center gap-1.5 min-w-0">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm truncate"
-              block
+              class="flex min-w-0 flex-col items-center text-center text-sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
-              {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
+              <span class="min-w-0 break-words line-clamp-1">
+                {{ col.name }}
+              </span>
+              <span v-if="col.version" class="text-fg-muted line-clamp-1">
+                @{{ col.version }}
+              </span>
             </LinkBase>
+
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb mt-0.5 h-3.5 w-3.5 shrink-0 cursor-help text-amber-500"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
             </TooltipApp>
-          </span>
+          </div>
         </div>
 
         <!-- "No dep" column (always last) -->
@@ -100,29 +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;
-}
-
-.comparison-grid.columns-2 {
-  grid-template-columns: minmax(120px, 180px) repeat(2, 1fr);
-}
-
-.comparison-grid.columns-3 {
-  grid-template-columns: minmax(120px, 160px) repeat(3, 1fr);
-}
-
-.comparison-grid.columns-4 {
-  grid-template-columns: minmax(100px, 140px) repeat(4, 1fr);
+  grid-template-columns:
+    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">

test/e2e/interactions.spec.ts

@@ -38,7 +38,7 @@ test.describe('Compare Page', () => {
     await expect(page).toHaveURL(/packages=vue,nuxt,__no_dependency__/)
 
     // Verify column order in the grid: vue, nuxt, then no-dep
-    const headerLinks = grid.locator('.comparison-cell-header a.truncate')
+    const headerLinks = grid.locator('.comparison-cell-header a[title]')
     await expect(headerLinks).toHaveCount(2)
     await expect(headerLinks.nth(0)).toContainText('vue')
     await expect(headerLinks.nth(1)).toContainText('nuxt')

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

@@ -17,8 +17,10 @@ describe('ComparisonGrid', () => {
           columns: cols('lodash@4.17.21', 'underscore@1.13.6'),
         },
       })
-      expect(component.text()).toContain('lodash@4.17.21')
-      expect(component.text()).toContain('underscore@1.13.6')
+      expect(component.text()).toContain('lodash')
+      expect(component.text()).toContain('@4.17.21')
+      expect(component.text()).toContain('underscore')
+      expect(component.text()).toContain('@1.13.6')
     })
 
     it('renders correct number of header cells', async () => {
@@ -43,74 +45,61 @@ describe('ComparisonGrid', () => {
       expect(component.find('.comparison-cell-nodep').exists()).toBe(true)
     })
 
-    it('truncates long header text with title attribute', async () => {
+    it('renders package name and version on separate clamped lines with a full title attribute', async () => {
       const longName = 'very-long-package-name@1.0.0-beta.1'
       const component = await mountSuspended(ComparisonGrid, {
         props: {
           columns: cols(longName, 'short'),
         },
       })
-      const links = component.findAll('a.truncate')
-      const longLink = links.find(a => a.text() === longName)
-      expect(longLink?.attributes('title')).toBe(longName)
+
+      const link = component.find(`a[title="${longName}"]`)
+      expect(link.exists()).toBe(true)
+      expect(link.attributes('title')).toBe(longName)
+      expect(link.findAll('.line-clamp-1')).toHaveLength(2)
     })
   })
 
   describe('column layout', () => {
-    it('applies columns-2 class for 2 columns', async () => {
+    it('sets --package-count to the number of package columns', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
           columns: cols('a', 'b'),
         },
       })
-      expect(component.find('.columns-2').exists()).toBe(true)
+      const grid = component.find('.comparison-grid')
+      expect(grid.attributes('style')).toContain('--package-count: 2')
     })
 
-    it('applies columns-3 class for 2 packages + no-dep', async () => {
+    it('includes the no-dependency column in --package-count', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
           columns: cols('a', 'b'),
           showNoDependency: true,
         },
       })
-      expect(component.find('.columns-3').exists()).toBe(true)
-    })
-
-    it('applies columns-4 class for 4 columns', async () => {
-      const component = await mountSuspended(ComparisonGrid, {
-        props: {
-          columns: cols('a', 'b', 'c', 'd'),
-        },
-      })
-      expect(component.find('.columns-4').exists()).toBe(true)
+      const grid = component.find('.comparison-grid')
+      expect(grid.attributes('style')).toContain('--package-count: 3')
     })
 
-    it('sets min-width for 4 columns to 800px', async () => {
+    it('supports four package columns with the generic grid layout', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
           columns: cols('a', 'b', 'c', 'd'),
         },
       })
-      expect(component.find('.min-w-\\[800px\\]').exists()).toBe(true)
-    })
-
-    it('sets min-width for 2-3 columns to 600px', async () => {
-      const component = await mountSuspended(ComparisonGrid, {
-        props: {
-          columns: cols('a', 'b'),
-        },
-      })
-      expect(component.find('.min-w-\\[600px\\]').exists()).toBe(true)
+      const grid = component.find('.comparison-grid')
+      expect(grid.attributes('style')).toContain('--package-count: 4')
     })
 
-    it('sets --columns CSS variable', async () => {
+    it('sets --package-count CSS variable', async () => {
       const component = await mountSuspended(ComparisonGrid, {
         props: {
           columns: cols('a', 'b', 'c'),
         },
       })
       const grid = component.find('.comparison-grid')
-      expect(grid.attributes('style')).toContain('--columns: 3')
+      expect(grid.attributes('style')).toContain('--package-count: 3')
     })
   })