Refine compare grid header layout

Author: mihaizaurus

app/components/Compare/ComparisonGrid.vue

@@ -28,34 +28,39 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 
 <template>
   <div class="overflow-x-auto">
-    <div
-      class="comparison-grid"
-      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
-      :style="{ '--columns': totalColumns }"
-    >
+    <div class="comparison-grid" :style="{ '--package-count': totalColumns }">
       <!-- Header row -->
       <div class="comparison-header">
         <div class="comparison-label" />
 
         <!-- 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) -->
@@ -102,18 +107,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 .comparison-grid {
   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:
+    minmax(110px, 150px)
+    repeat(var(--package-count), minmax(0, 1fr));
 }
 
 .comparison-header {

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')
     })
   })