From 3940faed0d6b621408ed3a79f329fe9cb8ba3c60 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 18 Mar 2024 14:46:17 +0100
Subject: [PATCH] fix(MessagesList): Fix chat jumping on reference widgets

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 47 +++++++++++---------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 7c97ac0ebf5..75f5c305660 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -35,26 +35,28 @@
 			<ul v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
 		</TransitionWrapper>
 
-		<ul v-for="(list, dateTimestamp) in messagesGroupedByDateByAuthor"
-			:key="`section_${dateTimestamp}`"
-			:ref="`dateGroup-${token}`"
-			:data-date-timestamp="dateTimestamp"
-			:class="{'has-sticky': dateTimestamp === stickyDate}">
-			<li class="messages-group__date">
-				<span class="messages-group__date-text" role="heading" aria-level="3">
-					{{ dateSeparatorLabels[dateTimestamp] }}
-				</span>
-			</li>
-			<component :is="messagesGroupComponent(group)"
-				v-for="group in list"
-				:key="group.id"
-				ref="messagesGroup"
-				class="messages-group"
-				:token="token"
-				:messages="group.messages"
-				:previous-message-id="group.previousMessageId"
-				:next-message-id="group.nextMessageId" />
-		</ul>
+		<div class="messages-list-wrapper__reversed">
+			<ul v-for="[dateTimestamp, list] in Object.entries(messagesGroupedByDateByAuthor).reverse()"
+				:key="`section_${dateTimestamp}`"
+				:ref="`dateGroup-${token}`"
+				:data-date-timestamp="dateTimestamp"
+				:class="{'has-sticky': dateTimestamp === stickyDate}">
+				<li class="messages-group__date">
+					<span class="messages-group__date-text" role="heading" aria-level="3">
+						{{ dateSeparatorLabels[dateTimestamp] }}
+					</span>
+				</li>
+				<component :is="messagesGroupComponent(group)"
+					v-for="group in list"
+					:key="group.id"
+					ref="messagesGroup"
+					class="messages-group"
+					:token="token"
+					:messages="group.messages"
+					:previous-message-id="group.previousMessageId"
+					:next-message-id="group.nextMessageId" />
+			</ul>
+		</div>
 
 		<template v-if="showLoadingAnimation">
 			<LoadingPlaceholder type="messages"
@@ -1367,4 +1369,9 @@ export default {
 	opacity: 1;
 	transition: opacity 0s;
 }
+
+.messages-list-wrapper__reversed {
+	display: flex;
+	flex-direction: column-reverse;
+}
 </style>