From e0bdab0d19fb613dcc9f2141a53656a705f95478 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 9 Dec 2020 14:49:38 +1100
Subject: [PATCH] fix appearance of bubbles when convo is full of messages

---
 ts/components/conversation/TypingBubble.tsx | 45 ++++++++++-----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index 8c5cfdc9b..02c93a6e9 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import classNames from 'classnames';
 
 import { TypingAnimation } from './TypingAnimation';
-import { Avatar } from '../Avatar';
 import styled from 'styled-components';
 
 interface TypingBubbleProps {
@@ -20,28 +18,30 @@ const TypingBubbleContainer = styled.div<TypingBubbleProps>`
   padding-top: ${props => (props.isTyping ? '4px' : '0px')};
   transition: ${props => props.theme.common.animations.defaultDuration};
   padding-inline-end: 16px;
+  padding-inline-start: 4px;
   overflow: hidden;
+  flex-shrink: 0;
 `;
 
 export const TypingBubble = (props: TypingBubbleProps) => {
-  const renderAvatar = () => {
-    const { avatarPath, displayedName, conversationType, phoneNumber } = props;
-
-    if (conversationType !== 'group') {
-      return;
-    }
-
-    return (
-      <div className="module-message__author-avatar">
-        <Avatar
-          avatarPath={avatarPath}
-          name={displayedName || phoneNumber}
-          size={36}
-          pubkey={phoneNumber}
-        />
-      </div>
-    );
-  };
+  // const renderAvatar = () => {
+  //   const { avatarPath, displayedName, conversationType, phoneNumber } = props;
+
+  //   if (conversationType !== 'group') {
+  //     return;
+  //   }
+
+  //   return (
+  //     <div className="module-message__author-avatar">
+  //       <Avatar
+  //         avatarPath={avatarPath}
+  //         name={displayedName || phoneNumber}
+  //         size={36}
+  //         pubkey={phoneNumber}
+  //       />
+  //     </div>
+  //   );
+  // };
 
   if (props.conversationType === 'group') {
     return <></>;
@@ -49,10 +49,7 @@ export const TypingBubble = (props: TypingBubbleProps) => {
 
   return (
     <TypingBubbleContainer {...props}>
-      <div className="module-message__typing-container">
-        <TypingAnimation i18n={window.i18n} />
-      </div>
-      {renderAvatar()}
+      <TypingAnimation i18n={window.i18n} />
     </TypingBubbleContainer>
   );
 };