From 8271a6546d5521fca2eb8b14f259a3393bc01506 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 24 May 2024 15:26:48 +1000
Subject: [PATCH] fix: typing animation alignment inside of the messages list

---
 .../SessionMessagesListContainer.tsx            | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
index 76319376f..ccdcaa3f3 100644
--- a/ts/components/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -65,8 +65,9 @@ const StyledMessagesContainer = styled.div`
   }
 `;
 
-const StyledTypingBubble = styled(TypingBubble)`
-  margin: var(--margins-xs) var(--margins-lg) 0;
+// NOTE Must always match the padding of the StyledReadableMessage
+const StyledTypingBubbleContainer = styled.div`
+  padding: var(--margins-xs) var(--margins-lg) 0;
 `;
 
 class SessionMessagesListContainerInner extends Component<Props> {
@@ -118,11 +119,13 @@ class SessionMessagesListContainerInner extends Component<Props> {
         ref={this.props.messageContainerRef}
         data-testid="messages-container"
       >
-        <StyledTypingBubble
-          conversationType={conversation.type}
-          isTyping={!!conversation.isTyping}
-          key="typing-bubble"
-        />
+        <StyledTypingBubbleContainer>
+          <TypingBubble
+            conversationType={conversation.type}
+            isTyping={!!conversation.isTyping}
+            key="typing-bubble"
+          />
+        </StyledTypingBubbleContainer>
         <ConversationMessageRequestButtons />
 
         <ScrollToLoadedMessageContext.Provider value={this.scrollToLoadedMessage}>