From fbfd2c3d201bf6b4f5e14e712ee590fae0b06c52 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 10 Jan 2022 12:53:23 +0000
Subject: [PATCH] Fix read receipts and sent indicators for bubble layout
 (#7460)

---
 res/css/views/rooms/_EventBubbleTile.scss |  2 +-
 res/css/views/rooms/_EventTile.scss       | 54 ++++++++++++-----------
 src/components/views/rooms/EventTile.tsx  |  4 +-
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 53c0a03a52..e7ed2b42a5 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -306,7 +306,7 @@ limitations under the License.
 
     .mx_EventTile_readAvatars {
         position: absolute;
-        right: -110px;
+        right: -78px; // as close to right gutter without clipping as possible
         bottom: 0;
         top: auto;
     }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 95ad106684..acc0066572 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -17,6 +17,34 @@ limitations under the License.
 
 $left-gutter: 64px;
 
+.mx_EventTile {
+    .mx_EventTile_receiptSent,
+    .mx_EventTile_receiptSending {
+        // We don't use `position: relative` on the element because then it won't line
+        // up with the other read receipts
+
+        &::before {
+            background-color: $tertiary-content;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: 14px;
+            width: 14px;
+            height: 14px;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+    .mx_EventTile_receiptSent::before {
+        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+    }
+    .mx_EventTile_receiptSending::before {
+        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+    }
+}
+
 .mx_EventTile:not([data-layout=bubble]) {
     max-width: 100%;
     clear: both;
@@ -172,32 +200,6 @@ $left-gutter: 64px;
         color: $accent-fg-color;
     }
 
-    .mx_EventTile_receiptSent,
-    .mx_EventTile_receiptSending {
-        // We don't use `position: relative` on the element because then it won't line
-        // up with the other read receipts
-
-        &::before {
-            background-color: $tertiary-content;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: 14px;
-            width: 14px;
-            height: 14px;
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-        }
-    }
-    .mx_EventTile_receiptSent::before {
-        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
-    }
-    .mx_EventTile_receiptSending::before {
-        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
-    }
-
     &.mx_EventTile_contextual {
         opacity: 0.4;
     }
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index ca5e1f3820..adca79329e 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -451,7 +451,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // Check to make sure the sending state is appropriate. A null/undefined send status means
         // that the message is 'sent', so we're just double checking that it's explicitly not sent.
-        if (this.props.eventSendStatus && this.props.eventSendStatus !== 'sent') return false;
+        if (this.props.eventSendStatus && this.props.eventSendStatus !== EventStatus.SENT) return false;
 
         // If anyone has read the event besides us, we don't want to show a sent receipt.
         const receipts = this.props.readReceipts || [];
@@ -468,7 +468,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // Check the event send status to see if we are pending. Null/undefined status means the
         // message was sent, so check for that and 'sent' explicitly.
-        if (!this.props.eventSendStatus || this.props.eventSendStatus === 'sent') return false;
+        if (!this.props.eventSendStatus || this.props.eventSendStatus === EventStatus.SENT) return false;
 
         // Default to showing - there's no other event properties/behaviours we care about at
         // this point.