Fixes rendering of about bio

ts/components/ContactListItem.stories.tsx

@@ -64,7 +64,7 @@ storiesOf('Components/ContactListItem', module)
         name="Someone 🔥 Somewhere"
         phoneNumber="(202) 555-0011"
         profileName="🔥Flames🔥"
-        about="👍 Free to chat"
+        about="👍 This is my really long status message that I have in order to test line breaking"
         avatarPath={gifUrl}
         onClick={onClick}
       />

ts/components/conversation/ConversationHeader.stories.tsx

@@ -47,6 +47,7 @@ const commonProps = {
 
   onShowSafetyNumber: action('onShowSafetyNumber'),
   onShowAllMedia: action('onShowAllMedia'),
+  onShowContactModal: action('onShowContactModal'),
   onShowGroupMembers: action('onShowGroupMembers'),
   onGoBack: action('onGoBack'),
 

ts/components/conversation/ConversationHeader.tsx

@@ -63,6 +63,7 @@ export type PropsDataType = {
 export type PropsActionsType = {
   onSetMuteNotifications: (seconds: number) => void;
   onSetDisappearingMessages: (seconds: number) => void;
+  onShowContactModal: (contactId: string) => void;
   onDeleteMessages: () => void;
   onResetSession: () => void;
   onSearchInConversation: () => void;
@@ -468,6 +469,42 @@ export class ConversationHeader extends React.Component<PropsType> {
     );
   }
 
+  private renderHeader(): JSX.Element {
+    const { id, isMe, onShowContactModal, type } = this.props;
+
+    if (type === 'group' || isMe) {
+      return (
+        <div className="module-conversation-header__title-flex">
+          {this.renderAvatar()}
+          {this.renderTitle()}
+        </div>
+      );
+    }
+
+    const onContactClick = () => onShowContactModal(id);
+    const onKeyDown = (e: React.KeyboardEvent): void => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.stopPropagation();
+        e.preventDefault();
+
+        onShowContactModal(id);
+      }
+    };
+
+    return (
+      <div
+        className="module-conversation-header__title-flex module-conversation-header__title-clickable"
+        onClick={onContactClick}
+        onKeyDown={onKeyDown}
+        role="button"
+        tabIndex={0}
+      >
+        {this.renderAvatar()}
+        {this.renderTitle()}
+      </div>
+    );
+  }
+
   public render(): JSX.Element {
     const { id } = this.props;
     const triggerId = `conversation-${id}`;
@@ -476,10 +513,7 @@ export class ConversationHeader extends React.Component<PropsType> {
       <div className="module-conversation-header">
         {this.renderBackButton()}
         <div className="module-conversation-header__title-container">
-          <div className="module-conversation-header__title-flex">
-            {this.renderAvatar()}
-            {this.renderTitle()}
-          </div>
+          {this.renderHeader()}
         </div>
         {this.renderExpirationLength()}
         {this.renderOutgoingCallButtons()}

ts/components/conversation/ConversationHero.tsx

@@ -191,7 +191,7 @@ export const ConversationHero = ({
           />
         )}
       </h1>
-      {about && (
+      {about && !isMe && (
         <div className="module-about__container">
           <About text={about} />
         </div>