From 3260166e3a29559bb8503234af48cb334a26a6e0 Mon Sep 17 00:00:00 2001 From: Rohit Ghumare Date: Tue, 26 May 2026 16:07:20 +0100 Subject: [PATCH 1/5] fix(ui): keep compare header links inside their grid column --- app/components/Compare/ComparisonGrid.vue | 2 +- .../nuxt/components/compare/ComparisonGrid.spec.ts | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue index 325839c49c..da8d358bac 100644 --- a/app/components/Compare/ComparisonGrid.vue +++ b/app/components/Compare/ComparisonGrid.vue @@ -49,7 +49,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts index 40eda3c44e..89e342b511 100644 --- a/test/nuxt/components/compare/ComparisonGrid.spec.ts +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -58,6 +58,20 @@ describe('ComparisonGrid', () => { expect(link.attributes('title')).toBe(longName) expect(link.findAll('.line-clamp-1')).toHaveLength(2) }) + + it('constrains the header link to its grid track so long scoped names cannot overflow', async () => { + const longName = '@agentmemory/agentmemory@0.9.22' + const component = await mountSuspended(ComparisonGrid, { + props: { + columns: cols(longName, 'claude-mem@13.3.0', 'supermemory@4.21.1', 'mem0ai@3.0.3'), + }, + }) + + const link = component.find(`a[title="${longName}"]`) + expect(link.exists()).toBe(true) + expect(link.classes()).toContain('flex-1') + expect(link.classes()).toContain('min-w-0') + }) }) describe('column layout', () => { From df930dcb9350935a1fe967ff1d00686e02b2c773 Mon Sep 17 00:00:00 2001 From: Rohit Ghumare Date: Tue, 26 May 2026 16:38:12 +0100 Subject: [PATCH 2/5] test: use synthetic package names in comparison-grid overflow test --- test/nuxt/components/compare/ComparisonGrid.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts index 89e342b511..b2d6d120cf 100644 --- a/test/nuxt/components/compare/ComparisonGrid.spec.ts +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -60,10 +60,10 @@ describe('ComparisonGrid', () => { }) it('constrains the header link to its grid track so long scoped names cannot overflow', async () => { - const longName = '@agentmemory/agentmemory@0.9.22' + const longName = '@scope/very-long-package-name@1.2.3' const component = await mountSuspended(ComparisonGrid, { props: { - columns: cols(longName, 'claude-mem@13.3.0', 'supermemory@4.21.1', 'mem0ai@3.0.3'), + columns: cols(longName, 'pkg-b@1.0.0', 'pkg-c@1.0.0', 'pkg-d@1.0.0'), }, }) From 4788eaee05773d5e2605f75c4cdc31cd3a91b21a Mon Sep 17 00:00:00 2001 From: Rohit Ghumare Date: Tue, 26 May 2026 18:16:52 +0100 Subject: [PATCH 3/5] test: build scoped column directly to avoid splitting name on '@' --- test/nuxt/components/compare/ComparisonGrid.spec.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts index b2d6d120cf..3d63461f28 100644 --- a/test/nuxt/components/compare/ComparisonGrid.spec.ts +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -60,14 +60,18 @@ describe('ComparisonGrid', () => { }) it('constrains the header link to its grid track so long scoped names cannot overflow', async () => { - const longName = '@scope/very-long-package-name@1.2.3' + const scopedName = '@scope/very-long-package-name' + const scopedVersion = '1.2.3' const component = await mountSuspended(ComparisonGrid, { props: { - columns: cols(longName, 'pkg-b@1.0.0', 'pkg-c@1.0.0', 'pkg-d@1.0.0'), + columns: [ + { name: scopedName, version: scopedVersion }, + ...cols('pkg-b@1.0.0', 'pkg-c@1.0.0', 'pkg-d@1.0.0'), + ], }, }) - const link = component.find(`a[title="${longName}"]`) + const link = component.find(`a[title="${scopedName}@${scopedVersion}"]`) expect(link.exists()).toBe(true) expect(link.classes()).toContain('flex-1') expect(link.classes()).toContain('min-w-0') From 8f569907332aa47ea9b294ec8bc1157be1b22793 Mon Sep 17 00:00:00 2001 From: Rohit Ghumare Date: Tue, 26 May 2026 19:25:01 +0100 Subject: [PATCH 4/5] fix(ui): truncate long package names in compare headers with ellipsis MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace break-words + line-clamp-1 with truncate (single-line ellipsis) on the package name and version spans, matching the pattern already used for chart labels in the same page. Previously, scoped names like @agentmemory/agentmemory broke at the '@' boundary so the scope prefix wrapped onto a second line that line-clamp-1 hid, making it look like the start of the name was cropped. Truncation keeps the start visible and ends in '…' when the name overflows. --- app/components/Compare/ComparisonGrid.vue | 4 ++-- test/nuxt/components/compare/ComparisonGrid.spec.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue index da8d358bac..191d7d37df 100644 --- a/app/components/Compare/ComparisonGrid.vue +++ b/app/components/Compare/ComparisonGrid.vue @@ -52,10 +52,10 @@ function getReplacementTooltip(col: ComparisonGridColumn): string { class="flex min-w-0 flex-1 flex-col items-center text-center text-sm" :title="col.version ? `${col.name}@${col.version}` : col.name" > - + {{ col.name }} - + @{{ col.version }} diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts index 3d63461f28..fc587f4a35 100644 --- a/test/nuxt/components/compare/ComparisonGrid.spec.ts +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -45,7 +45,7 @@ describe('ComparisonGrid', () => { expect(component.find('.comparison-cell-nodep').exists()).toBe(true) }) - it('renders package name and version on separate clamped lines with a full title attribute', async () => { + it('renders package name and version on separate truncated lines with a full title attribute', async () => { const longName = 'very-long-package-name@1.0.0-beta.1' const component = await mountSuspended(ComparisonGrid, { props: { @@ -56,7 +56,7 @@ describe('ComparisonGrid', () => { 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) + expect(link.findAll('.truncate')).toHaveLength(2) }) it('constrains the header link to its grid track so long scoped names cannot overflow', async () => { From f29eb4bb67a1b60de7e8914c89dbf5497e083a10 Mon Sep 17 00:00:00 2001 From: Rohit Ghumare Date: Tue, 26 May 2026 21:16:21 +0100 Subject: [PATCH 5/5] test: drop CSS-class-only assertion on scoped header link Per reviewer feedback: the CSS change covers the behavior; asserting on flex-1/min-w-0 class names doesn't add meaningful coverage. --- .../components/compare/ComparisonGrid.spec.ts | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts index fc587f4a35..dd06dde751 100644 --- a/test/nuxt/components/compare/ComparisonGrid.spec.ts +++ b/test/nuxt/components/compare/ComparisonGrid.spec.ts @@ -58,24 +58,6 @@ describe('ComparisonGrid', () => { expect(link.attributes('title')).toBe(longName) expect(link.findAll('.truncate')).toHaveLength(2) }) - - it('constrains the header link to its grid track so long scoped names cannot overflow', async () => { - const scopedName = '@scope/very-long-package-name' - const scopedVersion = '1.2.3' - const component = await mountSuspended(ComparisonGrid, { - props: { - columns: [ - { name: scopedName, version: scopedVersion }, - ...cols('pkg-b@1.0.0', 'pkg-c@1.0.0', 'pkg-d@1.0.0'), - ], - }, - }) - - const link = component.find(`a[title="${scopedName}@${scopedVersion}"]`) - expect(link.exists()).toBe(true) - expect(link.classes()).toContain('flex-1') - expect(link.classes()).toContain('min-w-0') - }) }) describe('column layout', () => {