Fix rendering of long names in <DeliveryIssueNotification>

ts/components/conversation/DeliveryIssueNotification.stories.tsx

@@ -10,12 +10,15 @@ 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(
+story.add('Default', () => {
-  'Default',
-  () => {
   return (
     <DeliveryIssueNotification
       i18n={i18n}
@@ -24,12 +27,26 @@ storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
       sender={sender}
     />
   );
-  }
+});
-);
 
-storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
+story.add('With a long name', () => {
-  'In Group',
+  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}
@@ -38,5 +55,4 @@ storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
       sender={sender}
     />
   );
-  }
+});
-);

ts/components/conversation/DeliveryIssueNotification.tsx

@@ -49,6 +49,7 @@ export function DeliveryIssueNotification(
     <div className="SystemMessage SystemMessage--multiline">
       <div className="SystemMessage__line">
         <span className="SystemMessage__icon SystemMessage__icon--info" />
+        <span>
           <Intl
             id="DeliveryIssue--notification"
             components={{
@@ -56,6 +57,7 @@ export function DeliveryIssueNotification(
             }}
             i18n={i18n}
           />
+        </span>
       </div>
       <div className="SystemMessage__line">
         <Button