From 28289f4b9ec0a23d79e1941e17d02a275656af0a Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Mon, 18 Oct 2021 16:09:38 +0200
Subject: [PATCH] Fix threads with bubbles rendering

Fixes https://github.com/vector-im/element-web/issues/18958
---
 res/css/views/rooms/_EventBubbleTile.scss | 24 ++++++++++++++++++++++-
 res/css/views/rooms/_EventTile.scss       |  2 ++
 src/components/views/rooms/EventTile.tsx  |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 389a5c97061..057e33eb2b4 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -28,6 +28,12 @@ limitations under the License.
     margin-left: 49px;
     margin-right: 100px;
     font-size: $font-14px;
+    flex-direction: column;
+    display: flex;
+
+    .mx_ThreadInfo {
+        max-width: 100%;
+    }
 
     &.mx_EventTile_continuation {
         margin-top: 2px;
@@ -85,6 +91,8 @@ limitations under the License.
     }
 
     &[data-self=false] {
+        align-items: flex-start;
+
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
         }
@@ -98,11 +106,18 @@ limitations under the License.
         }
 
         --backgroundColor: $eventbubble-others-bg;
+
+        .mx_ThreadInfo {
+            align-self: flex-start;
+            margin-top: 8px;
+            margin-left: -10px;
+            margin-bottom: 8px;
+        }
     }
     &[data-self=true] {
+        align-items: flex-end;
         .mx_EventTile_line {
             border-bottom-left-radius: var(--cornerRadius);
-            float: right;
             > a {
                 left: auto;
                 right: -68px;
@@ -132,6 +147,13 @@ limitations under the License.
         }
 
         --backgroundColor: $eventbubble-self-bg;
+
+        .mx_ThreadInfo {
+            align-self: flex-end;
+            margin-right: -14px;
+            margin-top: 8px;
+            margin-bottom: 4px;
+        }
     }
 
     .mx_EventTile_line {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 74fc141b480..cde3e767f65 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -691,6 +691,8 @@ $hover-select-border: 4px;
     color: $secondary-content;
     box-sizing: border-box;
     justify-content: flex-start;
+    margin-right: 110px;
+    margin-left: 64px;
 
     &:hover, &-active {
         cursor: pointer;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index c6ee4a7529e..a455a31c97f 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1335,9 +1335,9 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { keyRequestInfo }
                             { actionBar }
                             { this.props.layout === Layout.IRC && (reactionsRow) }
-                            { this.renderThreadInfo() }
                         </div>
                         { this.props.layout !== Layout.IRC && (reactionsRow) }
+                        { this.renderThreadInfo() }
                         { msgOption }
                     </>)
                 );