From e738e07d3e3b6241e3e905bb449d33ad270ed4d9 Mon Sep 17 00:00:00 2001
From: Maxim Shishmarev <maxim@loki.network>
Date: Tue, 19 Nov 2019 15:58:17 +1100
Subject: [PATCH] Add missing margin to typing indicator bubbles

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

diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index d4566f677..53229f985 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -52,18 +52,22 @@ export class TypingBubble extends React.Component<Props> {
     const { i18n, color } = this.props;
 
     return (
-      <div className={classNames('module-message', 'module-message--incoming')}>
+      <div className="loki-message-wrapper">
         <div
-          className={classNames(
-            'module-message__container',
-            'module-message__container--incoming',
-            `module-message__container--incoming-${color}`
-          )}
+          className={classNames('module-message', 'module-message--incoming')}
         >
-          <div className="module-message__typing-container">
-            <TypingAnimation color="light" i18n={i18n} />
+          <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>
+            {this.renderAvatar()}
           </div>
-          {this.renderAvatar()}
         </div>
       </div>
     );