From 808ade2a8ce6d528f3300fb1d23b5037f1a376f6 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Thu, 2 Sep 2021 12:34:00 -0500
Subject: [PATCH] Fix rendering of long names in `<DeliveryIssueNotification>`

---
 .../DeliveryIssueNotification.stories.tsx     | 68 ++++++++++++-------
 .../DeliveryIssueNotification.tsx             | 16 +++--
 2 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/ts/components/conversation/DeliveryIssueNotification.stories.tsx b/ts/components/conversation/DeliveryIssueNotification.stories.tsx
index bbfc1669bb94..3504d8a6093f 100644
--- a/ts/components/conversation/DeliveryIssueNotification.stories.tsx
+++ b/ts/components/conversation/DeliveryIssueNotification.stories.tsx
@@ -10,33 +10,49 @@ import enMessages from '../../../_locales/en/messages.json';
 import { DeliveryIssueNotification } from './DeliveryIssueNotification';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 
+const story = storiesOf(
+  'Components/Conversation/DeliveryIssueNotification',
+  module
+);
+
 const i18n = setupI18n('en', enMessages);
 const sender = getDefaultConversation();
 
-storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
-  'Default',
-  () => {
-    return (
-      <DeliveryIssueNotification
-        i18n={i18n}
-        inGroup={false}
-        learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
-        sender={sender}
-      />
-    );
-  }
-);
+story.add('Default', () => {
+  return (
+    <DeliveryIssueNotification
+      i18n={i18n}
+      inGroup={false}
+      learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
+      sender={sender}
+    />
+  );
+});
 
-storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
-  'In Group',
-  () => {
-    return (
-      <DeliveryIssueNotification
-        i18n={i18n}
-        inGroup
-        learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
-        sender={sender}
-      />
-    );
-  }
-);
+story.add('With a long name', () => {
+  const longName = '🤷🏽‍♀️❤️🐞'.repeat(50);
+  return (
+    <DeliveryIssueNotification
+      i18n={i18n}
+      inGroup={false}
+      learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
+      sender={getDefaultConversation({
+        firstName: longName,
+        name: longName,
+        profileName: longName,
+        title: longName,
+      })}
+    />
+  );
+});
+
+story.add('In Group', () => {
+  return (
+    <DeliveryIssueNotification
+      i18n={i18n}
+      inGroup
+      learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
+      sender={sender}
+    />
+  );
+});
diff --git a/ts/components/conversation/DeliveryIssueNotification.tsx b/ts/components/conversation/DeliveryIssueNotification.tsx
index ace33a1d2bd3..d047882b4aa1 100644
--- a/ts/components/conversation/DeliveryIssueNotification.tsx
+++ b/ts/components/conversation/DeliveryIssueNotification.tsx
@@ -49,13 +49,15 @@ export function DeliveryIssueNotification(
     <div className="SystemMessage SystemMessage--multiline">
       <div className="SystemMessage__line">
         <span className="SystemMessage__icon SystemMessage__icon--info" />
-        <Intl
-          id="DeliveryIssue--notification"
-          components={{
-            sender: <Emojify text={sender.firstName || sender.title} />,
-          }}
-          i18n={i18n}
-        />
+        <span>
+          <Intl
+            id="DeliveryIssue--notification"
+            components={{
+              sender: <Emojify text={sender.firstName || sender.title} />,
+            }}
+            i18n={i18n}
+          />
+        </span>
       </div>
       <div className="SystemMessage__line">
         <Button