From 23b0da737d68950366aa407ebe8b31d1a5d2a3f7 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Fri, 6 Feb 2026 20:43:21 -0600
Subject: [PATCH] ContactModal: Show full label, even if very long

Co-authored-by: Scott Nonnenberg <scott@signal.org>
---
 stylesheets/components/ContactName.scss       | 11 +++++++---
 .../conversation/ContactModal.dom.stories.tsx | 21 +++++++++++++++++++
 .../conversation/ContactModal.dom.tsx         |  2 +-
 .../conversation/ContactName.dom.tsx          |  9 ++++++--
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/stylesheets/components/ContactName.scss b/stylesheets/components/ContactName.scss
index ffc68b4a05..0bea1d592c 100644
--- a/stylesheets/components/ContactName.scss
+++ b/stylesheets/components/ContactName.scss
@@ -295,12 +295,16 @@ $contact-colors: (
     display: flex;
     align-items: center;
     white-space: nowrap;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
   }
 
+  &--label-pill--inner--contact-modal {
+    align-items: start;
+    white-space: normal;
+  }
+
   &--label-pill--bubble {
     margin-inline-start: 2px;
     margin-bottom: -4px;
@@ -326,7 +330,7 @@ $contact-colors: (
     }
   }
 
-  &--label-pill--list {
+  &--label-pill--contact-modal {
     margin-bottom: -5px;
   }
 
@@ -352,7 +356,8 @@ $contact-colors: (
         }
       }
 
-      &--label-pill--list {
+      &--label-pill--list,
+      &--label-pill--contact-modal {
         color: color.mix(map.get($value, 'light'), #000000, 70%);
         background-color: rgba(map.get($value, 'light'), 0.1);
         @include mixins.dark-theme() {
diff --git a/ts/components/conversation/ContactModal.dom.stories.tsx b/ts/components/conversation/ContactModal.dom.stories.tsx
index e9069c2e87..abe636356d 100644
--- a/ts/components/conversation/ContactModal.dom.stories.tsx
+++ b/ts/components/conversation/ContactModal.dom.stories.tsx
@@ -97,6 +97,27 @@ WithLabelInvalidEmoji.args = {
   contactNameColor: '220',
 };
 
+export const LongLabel = Template.bind({});
+LongLabel.args = {
+  contactLabelEmoji: '🐝',
+  contactLabelString: '𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫',
+  contactNameColor: '270',
+};
+
+export const LongLabel2 = Template.bind({});
+LongLabel2.args = {
+  contactLabelEmoji: '🐝',
+  contactLabelString: '﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽',
+  contactNameColor: '270',
+};
+
+export const LongLabelAllEmoji = Template.bind({});
+LongLabelAllEmoji.args = {
+  contactLabelEmoji: '🐝',
+  contactLabelString: '🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝🐝',
+  contactNameColor: '270',
+};
+
 export const AsAdmin = Template.bind({});
 AsAdmin.args = {
   areWeAdmin: true,
diff --git a/ts/components/conversation/ContactModal.dom.tsx b/ts/components/conversation/ContactModal.dom.tsx
index 17d4302214..ec4f68cb29 100644
--- a/ts/components/conversation/ContactModal.dom.tsx
+++ b/ts/components/conversation/ContactModal.dom.tsx
@@ -393,7 +393,7 @@ export function ContactModal({
                     labelString: contactLabelString,
                   }}
                   contactNameColor={contactNameColor}
-                  context="list"
+                  context="contact-modal"
                 />
               </button>
             )}
diff --git a/ts/components/conversation/ContactName.dom.tsx b/ts/components/conversation/ContactName.dom.tsx
index 715183bcff..8b07f8fd84 100644
--- a/ts/components/conversation/ContactName.dom.tsx
+++ b/ts/components/conversation/ContactName.dom.tsx
@@ -115,7 +115,7 @@ export function ContactName({
   );
 }
 
-export type Context = 'bubble' | 'list' | 'quote';
+export type Context = 'bubble' | 'list' | 'quote' | 'contact-modal';
 
 export function GroupMemberLabel({
   emojiSize = 12,
@@ -180,7 +180,12 @@ export function GroupMemberLabel({
         getClassName(`--${contactNameColor}--label-pill--${context}`)
       )}
     >
-      <span className={getClassName('--label-pill--inner')}>
+      <span
+        className={classNames(
+          getClassName('--label-pill--inner'),
+          getClassName(`--label-pill--inner--${context}`)
+        )}
+      >
         {emojiElement}
         <span
           className={classNames(