Merge pull request #6979 from matrix-org/gsouquet/fix-19431

res/css/views/rooms/_EventBubbleTile.scss

@@ -28,11 +28,10 @@ limitations under the License.
     margin-left: 49px;
     margin-right: 100px;
     font-size: $font-14px;
-    flex-direction: column;
-    display: flex;
 
     .mx_ThreadInfo {
-        max-width: 100%;
+        clear: both;
+        width: fit-content;
     }
 
     &.mx_EventTile_continuation {
@@ -91,8 +90,6 @@ limitations under the License.
     }
 
     &[data-self=false] {
-        align-items: flex-start;
-
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
         }
@@ -106,23 +103,22 @@ 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;
             }
         }
+
+        .mx_ThreadInfo {
+            float: right;
+            margin-right: calc(-1 * var(--gutterSize));
+        }
+
         .mx_SenderProfile {
             display: none;
         }
@@ -147,13 +143,6 @@ 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 {

res/css/views/rooms/_EventTile.scss

@@ -690,8 +690,7 @@ $hover-select-border: 4px;
     color: $secondary-content;
     box-sizing: border-box;
     justify-content: flex-start;
-    margin-right: 110px;
-    margin-left: 64px;
+    clear: both;
 
     &:hover, &-active {
         cursor: pointer;

src/components/views/rooms/EventTile.tsx

@@ -1336,8 +1336,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { actionBar }
                             { this.props.layout === Layout.IRC && (reactionsRow) }
                         </div>
-                        { this.props.layout !== Layout.IRC && (reactionsRow) }
                         { this.renderThreadInfo() }
+                        { this.props.layout !== Layout.IRC && (reactionsRow) }
                         { msgOption }
                     </>)
                 );