From df407ef3a8001b0b1dc8c91fafba1ed9da2acd61 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Tue, 19 Oct 2021 09:31:28 +0100
Subject: [PATCH] Fix EventTileSummary layout for message bubbles

---
 res/css/views/rooms/_EventBubbleTile.scss | 11 +++++++++++
 res/css/views/rooms/_EventTile.scss       |  1 +
 src/components/views/rooms/EventTile.tsx  |  2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 72920936aa..2a419530d8 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -29,6 +29,11 @@ limitations under the License.
     margin-right: 100px;
     font-size: $font-14px;
 
+    .mx_ThreadInfo {
+        clear: both;
+        width: fit-content;
+    }
+
     &.mx_EventTile_continuation {
         margin-top: 2px;
     }
@@ -108,6 +113,12 @@ limitations under the License.
                 right: -68px;
             }
         }
+
+        .mx_ThreadInfo {
+            float: right;
+            margin-right: calc(-1 * var(--gutterSize));
+        }
+
         .mx_SenderProfile {
             display: none;
         }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 18af9c25b2..540b7d89af 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -690,6 +690,7 @@ $hover-select-border: 4px;
     color: $secondary-content;
     box-sizing: border-box;
     justify-content: flex-start;
+    clear: both;
 
     &:hover, &-active {
         cursor: pointer;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8e051d97a1..14ec872bc9 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1335,8 +1335,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { keyRequestInfo }
                             { actionBar }
                             { this.props.layout === Layout.IRC && (reactionsRow) }
-                            { this.renderThreadInfo() }
                         </div>
+                        { this.renderThreadInfo() }
                         { this.props.layout !== Layout.IRC && (reactionsRow) }
                         { msgOption }
                     </>)