From ba0384f381441b8040dedcbe81669b2c8a1a3936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 14 Apr 2021 11:43:42 +0200
Subject: [PATCH] Render msgOption only if showReadReceipts is enabled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/structures/_ScrollPanel.scss    |  2 +-
 src/components/views/rooms/EventTile.js | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_ScrollPanel.scss b/res/css/structures/_ScrollPanel.scss
index 699224949b..ebbaff0931 100644
--- a/res/css/structures/_ScrollPanel.scss
+++ b/res/css/structures/_ScrollPanel.scss
@@ -21,6 +21,6 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
-        overflow-y: hidden;
+        overflow: hidden;
     }
 }
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index a3474161d7..c48e557981 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -988,6 +988,16 @@ export default class EventTile extends React.Component {
         const groupPadlock = !useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
         const ircPadlock = useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
 
+        let msgOption;
+        if (SettingsStore.getValue("showReadReceipts")) {
+            msgOption = (
+                <div className="mx_EventTile_msgOption">
+                    { readAvatars }
+                </div>
+            );
+        }
+
+
         switch (this.props.tileShape) {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
@@ -1107,9 +1117,7 @@ export default class EventTile extends React.Component {
                             { reactionsRow }
                             { actionBar }
                         </div>
-                        <div className="mx_EventTile_msgOption">
-                            { readAvatars }
-                        </div>
+                        {msgOption}
                         {
                             // The avatar goes after the event tile as it's absolutely positioned to be over the
                             // event tile line, so needs to be later in the DOM so it appears on top (this avoids