Only shorten pubkeys if name is present

stylesheets/_modules.scss

@@ -20,6 +20,10 @@
   font-style: italic;
 }
 
+.module-contact-name.compact {
+  display: block;
+}
+
 // Module: Message
 
 .module-message {

ts/components/conversation/ContactName.tsx

@@ -11,6 +11,7 @@ interface Props {
   i18n: LocalizerType;
   module?: string;
   boldProfileName?: Boolean;
+  compact?: Boolean;
 }
 
 export class ContactName extends React.Component<Props> {
@@ -22,6 +23,7 @@ export class ContactName extends React.Component<Props> {
       i18n,
       module,
       boldProfileName,
+      compact,
     } = this.props;
     const prefix = module ? module : 'module-contact-name';
 
@@ -39,7 +41,7 @@ export class ContactName extends React.Component<Props> {
     ) : null;
 
     return (
-      <span className={prefix} dir="auto">
+      <span className={classNames(prefix, compact && 'compact')} dir="auto">
         {profileElement}
         {shouldShowProfile ? ' ' : null}
         <span

ts/components/conversation/Message.tsx

@@ -322,12 +322,18 @@ export class Message extends React.PureComponent<Props, State> {
       return null;
     }
 
+    const shortenedPubkey = `(...${authorPhoneNumber.substring(
+      authorPhoneNumber.length - 6
+    )})`;
+
+    const displayedPubkey = authorProfileName
+      ? shortenedPubkey
+      : authorPhoneNumber;
+
     return (
       <div className="module-message__author">
         <ContactName
-          phoneNumber={`(...${authorPhoneNumber.substring(
-            authorPhoneNumber.length - 6
-          )})`}
+          phoneNumber={displayedPubkey}
           name={authorName}
           profileName={authorProfileName}
           module="module-message__author"
@@ -594,6 +600,10 @@ export class Message extends React.PureComponent<Props, State> {
       quote.authorPhoneNumber.length - 6
     )})`;
 
+    const displayedPubkey = quote.authorProfileName
+      ? shortenedPubkey
+      : quote.authorPhoneNumber;
+
     return (
       <Quote
         i18n={i18n}
@@ -601,7 +611,7 @@ export class Message extends React.PureComponent<Props, State> {
         text={quote.text}
         attachment={quote.attachment}
         isIncoming={direction === 'incoming'}
-        authorPhoneNumber={shortenedPubkey}
+        authorPhoneNumber={displayedPubkey}
         authorProfileName={quote.authorProfileName}
         authorName={quote.authorName}
         authorColor={quoteColor}

ts/components/conversation/Quote.tsx

@@ -304,6 +304,7 @@ export class Quote extends React.Component<Props, State> {
             name={authorName}
             profileName={authorProfileName}
             i18n={i18n}
+            compact={true}
           />
         )}
       </div>