fix appearance of bubbles when convo is full of messages

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 renderAvatar = () => {
-    const { avatarPath, displayedName, conversationType, phoneNumber } = props;
+  //   const { avatarPath, displayedName, conversationType, phoneNumber } = props;
-
+
-    if (conversationType !== 'group') {
+  //   if (conversationType !== 'group') {
-      return;
+  //     return;
-    }
+  //   }
-
+
-    return (
+  //   return (
-      <div className="module-message__author-avatar">
+  //     <div className="module-message__author-avatar">
-        <Avatar
+  //       <Avatar
-          avatarPath={avatarPath}
+  //         avatarPath={avatarPath}
-          name={displayedName || phoneNumber}
+  //         name={displayedName || phoneNumber}
-          size={36}
+  //         size={36}
-          pubkey={phoneNumber}
+  //         pubkey={phoneNumber}
-        />
+  //       />
-      </div>
+  //     </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()}
     </TypingBubbleContainer>
   );
 };