fix(ui): truncate long package names on profile package likes page (#1757)

Author: serhalp

app/components/Package/LikeCard.vue

@@ -71,9 +71,9 @@ const likeAction = async () => {
 
 <template>
   <NuxtLink :to="packageRoute(name)">
-    <BaseCard class="font-mono flex justify-between">
-      {{ name }}
-      <div class="flex items-center gap-4 justify-between">
+    <BaseCard class="font-mono flex justify-between min-w-0">
+      <span class="truncate min-w-0" :title="name">{{ name }}</span>
+      <div class="flex items-center gap-4 justify-between shrink-0">
         <ClientOnly>
           <TooltipApp
             :text="likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')"

test/nuxt/components/PackageLikeCard.spec.ts

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { VueWrapper } from '@vue/test-utils'
+import LikeCard from '~/components/Package/LikeCard.vue'
+
+describe('PackageLikeCard', () => {
+  let wrapper: VueWrapper
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  function mountLikeCard(packageUrl: string) {
+    return mountSuspended(LikeCard, {
+      props: { packageUrl },
+      attachTo: document.body,
+    })
+  }
+
+  it('renders the package name', async () => {
+    wrapper = await mountLikeCard('https://npmx.dev/package/vue')
+
+    expect(wrapper.text()).toContain('vue')
+  })
+
+  it('truncates a long package name instead of overflowing', async () => {
+    const longName = 'a'.repeat(200)
+    wrapper = await mountLikeCard(`https://npmx.dev/package/${longName}`)
+
+    const nameEl = wrapper.find('span.truncate').element as HTMLElement
+    expect(nameEl.scrollWidth).toBeGreaterThan(nameEl.clientWidth)
+  })
+
+  it('shows the full name in a title attribute on hover', async () => {
+    const longName = 'a'.repeat(200)
+    wrapper = await mountLikeCard(`https://npmx.dev/package/${longName}`)
+
+    const nameEl = wrapper.find('span.truncate')
+    expect(nameEl.attributes('title')).toBe(longName)
+  })
+
+  it('extracts scoped package name from URL', async () => {
+    wrapper = await mountLikeCard('https://npmx.dev/package/@scope/pkg')
+
+    expect(wrapper.find('span.truncate').text()).toBe('@scope/pkg')
+  })
+})