From e12bf45e842ddbb5a66f25dc60bbdcabb9f582af Mon Sep 17 00:00:00 2001
From: Prastowo aGung Widodo <prastowo@widodo.dev>
Date: Thu, 16 Apr 2026 23:02:23 +0200
Subject: [PATCH] fix(contacts): stop action buttons from wrapping on empty
 state

Apply whitespace-nowrap + overflow-hidden + text-ellipsis to the "New
Contact" / "Import vCard" buttons on the empty state, and add flex-wrap
+ min-w-0 on the parent so longer future translations wrap to a new
row instead of clipping behind the ellipsis. Icons get shrink-0 so
they stay rendered.

Credits #56 (@prastowoagungwidodo).
---
 components/contacts/contact-list.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/contacts/contact-list.tsx b/components/contacts/contact-list.tsx
index 4065548..2ebf280 100644
--- a/components/contacts/contact-list.tsx
+++ b/components/contacts/contact-list.tsx
@@ -169,14 +169,14 @@ export function ContactList({
                 <BookUser className="w-12 h-12 mb-3 text-muted-foreground/30" />
                 <p className="text-sm font-medium text-foreground">{t("empty_state_title")}</p>
                 <p className="text-xs text-muted-foreground mt-1">{t("empty_state_subtitle")}</p>
-                <div className="flex gap-2 mt-4">
-                  <Button size="sm" onClick={onCreateNew}>
-                    <UserPlus className="w-4 h-4 mr-1.5" />
+                <div className="flex flex-wrap gap-2 mt-4 justify-center">
+                  <Button size="sm" onClick={onCreateNew} className="min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">
+                    <UserPlus className="w-4 h-4 mr-1.5 shrink-0" />
                     {t("create_new")}
                   </Button>
                   {onImport && (
-                    <Button variant="outline" size="sm" onClick={onImport}>
-                      <Upload className="w-4 h-4 mr-1.5" />
+                    <Button variant="outline" size="sm" onClick={onImport} className="min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">
+                      <Upload className="w-4 h-4 mr-1.5 shrink-0" />
                       {t("import_vcard")}
                     </Button>
                   )}