From d84605c3d0fc5d40faddc0a40eb2996f51dc331b Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 17 Jan 2023 14:27:19 +0100
Subject: [PATCH] Fix broken threads list timestamp layout

Previously, thread list timestamps would overflow
into the unread messages bubble on the right.

This is fixed by resetting the width of the
timestamp and ensuring both the timestamp and the
display name can shrink if necessary.
Both now also use ellipses if necessary.
---
 res/css/views/rooms/_EventTile.pcss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 57bf2ce3c88f..23708fb97ff9 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -927,8 +927,14 @@ $left-gutter: 64px;
         inset: $padding auto auto $padding;
     }
 
+    .mx_EventTile_details {
+        overflow: hidden;
+    }
+
     .mx_DisambiguatedProfile {
         display: inline-flex;
+        align-items: center;
+        flex: 1;
 
         .mx_DisambiguatedProfile_displayName,
         .mx_DisambiguatedProfile_mxid {
@@ -979,7 +985,9 @@ $left-gutter: 64px;
 
     .mx_MessageTimestamp {
         font-size: $font-12px;
-        max-width: var(--MessageTimestamp-max-width);
+        width: unset; /* Cancel the default width */
+        overflow: hidden; /* ensure correct overflow behavior */
+        text-overflow: ellipsis;
         position: initial;
         margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
     }