ContactModal: Show full label, even if very long

Co-authored-by: Scott Nonnenberg <scott@signal.org>

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() {

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,

ts/components/conversation/ContactModal.dom.tsx

@@ -393,7 +393,7 @@ export function ContactModal({
                     labelString: contactLabelString,
                   }}
                   contactNameColor={contactNameColor}
-                  context="list"
+                  context="contact-modal"
                 />
               </button>
             )}

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(