From 08c85b6542ef2f4a85bac32a01bc554259ea4270 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Fri, 14 Jan 2022 16:21:56 +0000
Subject: [PATCH 1/3] Fix broken thread list timestamp display

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

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2b4be3d4ad8..ac1a3a8722a 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -791,6 +791,10 @@ $left-gutter: 64px;
     margin: var(--topOffset) 16px var(--topOffset) 0;
     border-radius: 8px;
 
+    display: flex;
+    flex-flow: wrap;
+    align-items: center;
+
     &:hover {
         background-color: $system;
     }
@@ -836,16 +840,21 @@ $left-gutter: 64px;
 
     .mx_SenderProfile {
         margin-left: var(--leftOffset) !important;
+        flex: 1;
+        margin-right: 12px;
+        text-overflow: ellipsis;
     }
 
     .mx_EventTile_line {
+        width: 100%;
         padding-left: var(--leftOffset) !important;
         padding-bottom: 0;
     }
+
     .mx_MessageTimestamp {
-        right: 0;
-        left: auto !important;
-        top: -23px;
+        position: initial !important;
+        max-width: 80px;
+        width: auto !important;
     }
 }
 
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 17513dde766..950bb21bfde 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1441,11 +1441,11 @@ export default class EventTile extends React.Component<IProps, IState> {
                     }, <>
                         { sender }
                         { avatar }
+                        { timestamp }
                         <div
                             className={lineClasses}
                             key="mx_EventTile_line"
                         >
-                            { linkedTimestamp }
                             { this.renderE2EPadlock() }
                             <div className="mx_EventTile_body">
                                 { MessagePreviewStore.instance.generatePreviewForEvent(this.props.mxEvent) }

From 7daa5a136b094e7ddc7c8cb6ea874d543ac0307a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Mon, 17 Jan 2022 09:04:55 +0000
Subject: [PATCH 2/3] Fix event line overflowing

---
 res/css/views/rooms/_EventTile.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index ac1a3a8722a..613bd883d47 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -842,11 +842,17 @@ $left-gutter: 64px;
         margin-left: var(--leftOffset) !important;
         flex: 1;
         margin-right: 12px;
+    }
+
+    .mx_SenderProfile_displayName {
+        display: block;
+        overflow: hidden;
         text-overflow: ellipsis;
     }
 
     .mx_EventTile_line {
         width: 100%;
+        box-sizing: border-box;
         padding-left: var(--leftOffset) !important;
         padding-bottom: 0;
     }

From 3bf90ce91da701322efbec1ecfce697102aac52a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Tue, 18 Jan 2022 15:46:24 +0000
Subject: [PATCH 3/3] Accomodate ellipsis for disambiguated mxid

---
 res/css/views/rooms/_EventTile.scss | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 4eb8d3aac6c..683465f388b 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -850,14 +850,29 @@ $left-gutter: 64px;
         margin-left: var(--leftOffset) !important;
         flex: 1;
         margin-right: 12px;
+
+        display: inline-flex;
+        // not a fan of the magic number here, but I just tweaked
+        // the hardcoded value of the current implementation
+        max-width: calc(100% - 96px);
     }
 
-    .mx_SenderProfile_displayName {
+    .mx_SenderProfile_displayName,
+    .mx_SenderProfile_mxid {
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
+    .mx_SenderProfile_displayName {
+        flex: none;
+        max-width: 100%;
+    }
+
+    .mx_SenderProfile_mxid {
+        flex: 1;
+    }
+
     .mx_EventTile_line {
         width: 100%;
         box-sizing: border-box;