Fix rendering of long names in <ProfileChangeNotification>

ts/components/conversation/ProfileChangeNotification.stories.tsx

@@ -47,4 +47,21 @@ storiesOf('Components/Conversation/ProfileChangeNotification', module)
         }}
       />
     );
+  })
+  .add('From contact with long names before and after', () => {
+    return (
+      <ProfileChangeNotification
+        i18n={i18n}
+        changedContact={getDefaultConversation({
+          id: 'some-guid',
+          type: 'direct',
+          title: 'Mr. Fire 🔥',
+        })}
+        change={{
+          type: 'name',
+          oldName: '💅🤷🏽‍♀️🏯'.repeat(50),
+          newName: '☎️🎉🏝'.repeat(50),
+        }}
+      />
+    );
   });

ts/components/conversation/ProfileChangeNotification.tsx

@@ -24,7 +24,9 @@ export function ProfileChangeNotification(props: PropsType): JSX.Element {
   return (
     <div className="SystemMessage">
       <div className="SystemMessage__icon SystemMessage__icon--profile" />
-      <Emojify text={message} />
+      <span>
+        <Emojify text={message} />
+      </span>
     </div>
   );
 }