From 8da2d0fe72103b0b3301c9f5e09c9f2c819e237d Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 22 Jul 2021 11:31:46 +0200
Subject: [PATCH] Fix avatar obstructing membership and state changes

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

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index ab4fb28791..af3f480999 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -132,7 +132,8 @@ $hover-select-border: 4px;
         }
     }
 
-    &.mx_EventTile_info .mx_EventTile_line {
+    &.mx_EventTile_info .mx_EventTile_line,
+    & ~ .mx_EventListSummary .mx_EventTile_avatar ~ .mx_EventTile_line {
         padding-left: calc($left-gutter + 18px);
     }
 
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index ddee81a914..ebb7f99e45 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -26,6 +26,7 @@ $left-gutter: 64px;
 
         > .mx_EventTile_avatar {
             position: absolute;
+            z-index: 9;
         }
 
         .mx_MessageTimestamp {
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 6861ea7af5..c6c605a8c2 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1142,6 +1142,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         { ircTimestamp }
                         { sender }
                         { ircPadlock }
+                        { avatar }
                         <div className="mx_EventTile_line" key="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
@@ -1162,7 +1163,6 @@ export default class EventTile extends React.Component<IProps, IState> {
                         </div>
                         { reactionsRow }
                         { msgOption }
-                        { avatar }
                     </>)
                 );
             }