From 3df3b800f8922a06241d5c4848cda9a666c2ec80 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 4 Nov 2026 11:04:28 +0100
Subject: [PATCH] fix: wrap a long contact name to two lines with the full name
 on hover

---
 .../contacts/__tests__/contacts-ux-pim.test.tsx       | 11 +++++++++++
 components/contacts/contact-detail.tsx                |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/contacts/__tests__/contacts-ux-pim.test.tsx b/components/contacts/__tests__/contacts-ux-pim.test.tsx
index de42bb5d7..c0dbef52c 100644
--- a/components/contacts/__tests__/contacts-ux-pim.test.tsx
+++ b/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()} />);
diff --git a/components/contacts/contact-detail.tsx b/components/contacts/contact-detail.tsx
index addc2d069..1537c9814 100644
--- a/components/contacts/contact-detail.tsx
+++ b/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>
               )}