Fix EventTileSummary layout for message bubbles

Author: Germain Souquet

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;
         }

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;

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 }
                     </>)