From 12689458401489890b70f52ff06b176197ff837d Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Wed, 27 Jan 2021 21:41:41 -0600
Subject: [PATCH] Fix typing bubble in group chats

---
 ts/components/conversation/TypingBubble.tsx | 48 +++++++++++----------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index 32c636464b..4ea178b8af 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -39,18 +39,20 @@ export class TypingBubble extends React.PureComponent<Props> {
     }
 
     return (
-      <div className="module-message__author-avatar">
-        <Avatar
-          avatarPath={avatarPath}
-          color={color}
-          conversationType="direct"
-          i18n={i18n}
-          name={name}
-          phoneNumber={phoneNumber}
-          profileName={profileName}
-          title={title}
-          size={28}
-        />
+      <div className="module-message__author-avatar-container">
+        <div className="module-message__author-avatar">
+          <Avatar
+            avatarPath={avatarPath}
+            color={color}
+            conversationType="direct"
+            i18n={i18n}
+            name={name}
+            phoneNumber={phoneNumber}
+            profileName={profileName}
+            title={title}
+            size={28}
+          />
+        </div>
       </div>
     );
   }
@@ -67,17 +69,19 @@ export class TypingBubble extends React.PureComponent<Props> {
           isGroup ? 'module-message--group' : null
         )}
       >
-        <div
-          className={classNames(
-            'module-message__container',
-            'module-message__container--incoming',
-            `module-message__container--incoming-${color}`
-          )}
-        >
-          <div className="module-message__typing-container">
-            <TypingAnimation color="light" i18n={i18n} />
+        {this.renderAvatar()}
+        <div className="module-message__container-outer">
+          <div
+            className={classNames(
+              'module-message__container',
+              'module-message__container--incoming',
+              `module-message__container--incoming-${color}`
+            )}
+          >
+            <div className="module-message__typing-container">
+              <TypingAnimation color="light" i18n={i18n} />
+            </div>
           </div>
-          {this.renderAvatar()}
         </div>
       </div>
     );