Fix broken thread list timestamp display

[germain-gg]

Fixes element-hq/element-web#20556

I have encountered a browser issue on Chromium that makes the ellipsis not work for the display name at the coloured element level. Which means that it does not fulfill the requirement set by @janogarcia to have the ellipsis match the colour and font weight

---

This PR currently has no changelog labels, so will not be included in changelogs.

Add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is plus X-Breaking-Change if it's a breaking change.

Preview: https://61e6e1a08c22dc0fc49ab71a--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[janogarcia]

Thread summary issues

Now the thread summary content doesn't truncate correctly and it's overflowing the container. Plus, the background on hovering the thread is split into two areas.

Display name truncation

As for the display name truncation I'd suggest trying a slightly different approach, if possible.

In a quick test, I tried disabling just the text-overflow property for .mx_SenderProfile and applied the following styles to .mx_SenderProfile_displayName

display: block;
overflow: hidden;
text-overflow: ellipsis;

and it worked as expected, see screenshot below, but I haven't tested it in other contexts or under other conditions (e.g. displaying a disambiguated name).

[germain-gg]

and it worked as expected, see screenshot below, but I haven't tested it in other contexts or under other conditions (e.g. displaying a disambiguated name).

The approach that you suggest above will not work when displaying disambiguated sender profiles. The solution that I brought here is not ideal but will truncate things correctly for all scenarios

[janogarcia]

@gsouquet You're going to hate me for this, but I'm still pushing for the correct behavior and styling to get implemented. Here's a quick attempt at it, showing a worst case scenario (long display name, plus Matrix ID for sender profile disambiguation).

---

Added styles:

.mx_SenderProfile {
    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 {
    flex: none;
    max-width: 100%;
}

.mx_SenderProfile_mxid {
    flex: 1;
}

[janogarcia]

I always seem to forget to hit the Review button before posting my PR review comments. Please find them in my previous comment. Hope it helps! 🤞

[janogarcia]

@gsouquet Thanks for updating the truncating behavior. :)