From 3d824855f0d8ceba733092f8048e809a92d5628a Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Wed, 27 Apr 2022 08:12:30 +0530
Subject: [PATCH] Fix positioning of read ticks on attachment message bubbles
 (#4545)

* Fix positioning of read ticks

* Review fixes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 .../widgets/conversation/bubble/Actions.vue         | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 86f97f400..c1c3440bc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="message-text--metadata">
-    <span class="time">{{ readableTime }}</span>
+    <span class="time" :class="{ delivered: messageRead }">{{
+      readableTime
+    }}</span>
     <span v-if="showSentIndicator" class="time">
       <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.SENT')"
@@ -252,6 +254,15 @@ export default {
       position: absolute;
       right: var(--space-small);
       white-space: nowrap;
+      &.delivered {
+        right: var(--space-medium);
+        line-height: 2;
+      }
+    }
+    .read-tick {
+      position: absolute;
+      bottom: var(--space-small);
+      right: var(--space-small);
     }
   }
 }