From dacac64b113da752c4d1a20c1765d6affb342ea1 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 5 Oct 2023 15:12:34 +1100
Subject: [PATCH] fix: messages are now the right way up

I have broken the reverse flexbox
---
 ts/components/conversation/SessionMessagesList.tsx | 14 ++------------
 .../conversation/SessionMessagesListContainer.tsx  | 12 +++++++++---
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/ts/components/conversation/SessionMessagesList.tsx b/ts/components/conversation/SessionMessagesList.tsx
index fa4a7ffc0..409ad72f0 100644
--- a/ts/components/conversation/SessionMessagesList.tsx
+++ b/ts/components/conversation/SessionMessagesList.tsx
@@ -2,7 +2,6 @@ import React, { useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import useKey from 'react-use/lib/useKey';
-import styled from 'styled-components';
 import {
   PropsForDataExtractionNotification,
   PropsForMessageRequestResponse,
@@ -34,14 +33,6 @@ function isNotTextboxEvent(e: KeyboardEvent) {
   return (e?.target as any)?.type === undefined;
 }
 
-// isGroup is used to align the ExpireTimer with the member avatars
-const StyledMessagesList = styled.div<{ isGroup: boolean }>`
-  padding: ${props =>
-    props.isGroup
-      ? '0 var(--margins-lg) 0 calc(var(--margins-lg) + 11px)'
-      : '0 var(--margins-lg) 0'};
-`;
-
 let previousRenderedConvo: string | undefined;
 
 export const SessionMessagesList = (props: {
@@ -53,7 +44,6 @@ export const SessionMessagesList = (props: {
   onPageDownPressed: () => void;
   onHomePressed: () => void;
   onEndPressed: () => void;
-  isGroup: boolean;
 }) => {
   const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
   const convoKey = useSelectedConversationKey();
@@ -106,7 +96,7 @@ export const SessionMessagesList = (props: {
   }
 
   return (
-    <StyledMessagesList isGroup={props.isGroup}>
+    <>
       {messagesProps.map(messageProps => {
         const messageId = messageProps.message.props.messageId;
         const unreadIndicator = messageProps.showUnreadIndicator ? (
@@ -171,6 +161,6 @@ export const SessionMessagesList = (props: {
 
         return [<Message messageId={messageId} key={messageId} />, ...componentToMerge];
       })}
-    </StyledMessagesList>
+    </>
   );
 };
diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
index 0e786004a..d60abb328 100644
--- a/ts/components/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -51,7 +51,8 @@ type Props = SessionMessageListProps & {
   scrollToNow: () => Promise<void>;
 };
 
-const StyledMessagesContainer = styled.div`
+// isGroup is used to align the ExpireTimer with the member avatars
+const StyledMessagesContainer = styled.div<{ isGroup: boolean }>`
   display: flex;
   flex-grow: 1;
   gap: var(--margins-xxs);
@@ -60,7 +61,12 @@ const StyledMessagesContainer = styled.div`
   overflow-x: hidden;
   min-width: 370px;
   scrollbar-width: 4px;
-  padding: var(--margins-sm) 0 var(--margins-lg);
+
+  padding-top: var(--margins-sm);
+  padding-right: var(--margins-lg);
+  padding-bottom: var(--margins-lg);
+  padding-left: ${props =>
+    props.isGroup ? 'calc(var(--margins-lg) + 11px)' : 'var(--margins-lg)'};
 
   .session-icon-button {
     display: flex;
@@ -121,6 +127,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
       <StyledMessagesContainer
         className="messages-container"
         id={messageContainerDomID}
+        isGroup={!conversation.isMe && !conversation.isPrivate && !conversation.isPublic}
         onScroll={this.handleScroll}
         ref={this.props.messageContainerRef}
         data-testid="messages-container"
@@ -144,7 +151,6 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
             onPageUpPressed={this.scrollPgUp}
             onHomePressed={this.scrollTop}
             onEndPressed={this.scrollEnd}
-            isGroup={!conversation.isMe && !conversation.isPrivate && !conversation.isPublic}
           />
         </ScrollToLoadedMessageContext.Provider>