fix: wrap a long contact name to two lines with the full name on hover

components/contacts/__tests__/contacts-ux-pim.test.tsx

@@ -45,6 +45,17 @@ describe('pim-19: standard words read as people say them', () => {
   });
 });
 
+describe('pim-21: a long name in the contact header', () => {
+  it('wraps to two lines and shows the whole name on hover', () => {
+    const long = { ...anna, name: { full: 'Maximiliane Alexandra Friederike von Hohenzollern-Sigmaringen-Wittelsbach' } };
+    render(<ContactDetail contact={long} onEdit={vi.fn()} onDelete={vi.fn()} />);
+    const heading = screen.getByRole('heading', { level: 2 });
+    expect(heading).toHaveAttribute('title', long.name.full);
+    expect(heading.className).toContain('line-clamp-2');
+    expect(heading.className).not.toMatch(/\btruncate\b/);
+  });
+});
+
 describe('pim-26: the contact editor keeps rare fields under "More fields"', () => {
   it('collapses Gender, Calendar, Online services and Personal info when none has a value', () => {
     render(<ContactForm contact={anna} onSave={vi.fn()} onCancel={vi.fn()} />);

components/contacts/contact-detail.tsx

@@ -151,7 +151,8 @@ export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDupli
           <div className={cn("flex items-center gap-4 min-w-0 flex-1", !isMobile && "basis-60")}>
             <Avatar name={name} email={email} contactPhoto={photo} size={isMobile ? "md" : "lg"} />
             <div className="min-w-0 flex-1">
-              <h2 className={cn("font-semibold truncate", isMobile ? "text-lg" : "text-xl")}>{name || "-"}</h2>
+              {/* A long name takes two lines, then ends in "…" with the whole name on hover. */}
+              <h2 title={name || undefined} className={cn("font-semibold line-clamp-2 break-words", isMobile ? "text-lg" : "text-xl")}>{name || "-"}</h2>
               {hasNickname && (
                 <p className="text-sm text-muted-foreground truncate">&ldquo;{nicknames.map(n => n.name).join(", ")}&rdquo;</p>
               )}