From d1b65b6c9ef401e7e7d82f78bc203a6c1f3dc4dd Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 29 Mar 2023 18:09:18 +0530
Subject: [PATCH] chore: Fixes avatar position on failed messages (#6784)

* feat: show external error in message

* Fixes avatar position on failed messages

---------

Co-authored-by: Clairton Rodrigo Heinzen <clairton.rodrigo@gmail.com>
---
 .../widgets/conversation/Message.vue          | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 2852cbc57..1a4955f6f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -1,6 +1,16 @@
 <template>
   <li v-if="shouldRenderMessage" :id="`message${data.id}`" :class="alignBubble">
     <div :class="wrapClass">
+      <div v-if="isFailed" class="message-failed--alert">
+        <woot-button
+          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
+          size="tiny"
+          color-scheme="alert"
+          variant="clear"
+          icon="arrow-clockwise"
+          @click="retrySendMessage"
+        />
+      </div>
       <div
         v-tooltip.top-start="messageToolTip"
         :class="bubbleClass"
@@ -103,16 +113,6 @@
           {{ sender.name }}
         </a>
       </div>
-      <div v-if="isFailed" class="message-failed--alert">
-        <woot-button
-          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          size="tiny"
-          color-scheme="alert"
-          variant="clear"
-          icon="arrow-clockwise"
-          @click="retrySendMessage"
-        />
-      </div>
     </div>
     <div v-if="shouldShowContextMenu" class="context-menu-wrap">
       <context-menu
@@ -625,7 +625,6 @@ li.right {
 
   .wrap.is-failed {
     display: flex;
-    flex-direction: row-reverse;
     align-items: flex-end;
     margin-left: auto;
   }