Show displayname in non-narrow thread summeries

[t3chguy]

Fixes element-hq/element-web#19646

---

Here's what your changelog entry will look like:

✨ Features

• Show displayname in non-narrow thread summeries (#8036). Fixes Implement Thread Summary changes element-hq/element-web#19646.

Preview: https://pr8036--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.

[codecov]

Codecov Report

Merging #8036 (70f7e19) into develop (df6c53f) will decrease coverage by 0.00%.
The diff coverage is 33.33%.

@@             Coverage Diff             @@
##           develop    #8036      +/-   ##
===========================================
- Coverage    26.79%   26.79%   -0.01%     
===========================================
  Files          865      865              
  Lines        51967    51974       +7     
  Branches     13163    13168       +5     
===========================================
+ Hits         13925    13926       +1     
- Misses       38042    38048       +6     

Impacted Files	Coverage Δ
src/components/views/rooms/ThreadSummary.tsx	8.33% <33.33%> (-0.76%)	⬇️
src/components/views/messages/MessageActionBar.tsx	53.22% <0.00%> (-0.50%)	⬇️
src/components/views/rooms/EventTile.tsx	46.78% <0.00%> (-0.18%)	⬇️

[janogarcia]

Thanks @t3chguy !

Just some minor tweaks here and there:

I tweaked some styles in the web inspector to test it live:

The text is now sitting on the same baseline, and the gap between the name and message preview is 4px.

---

I applied align-items: baseline to the thread summary container, then align-self: center to the thread icon and finally centered the avatar via old-school relative top 50% + translateY -50% (that was not very elegant, but applying align-self center to it was throwing off the baseline alignment for text), but there's probably a cleaner/simpler workaround (e.g., keeping align-items: center but making sure all text elements have the same line-height).

[janogarcia]

@t3chguy You're going to hate me for this, but now the caret icon shown on hover is not vertically aligned. Also, I noticed that the baseline alignment workaround I suggested using is slightly throwing the text from the actual vertical center.

That's why I'd suggest going for the second workaround, which it's actually simpler :D

Keep the align-items: center but apply the same line-height value for the text elements. That does the trick. It keeps all the text elements on the same baseline and properly centered.

Expected output:

[janogarcia]

That said, the baseline workaround worked for me (correct vertical center) on the screenshot above, so I'm not sure what are the implementation differences causing yours to be slightly off centered.

[t3chguy]

but now the caret icon shown on hover is not vertically aligned.

This is unrelated to this PR and the existing behaviour

Caused by reliance on the Inter font and a non-centered character in an ::after pseudo-element which cannot have text alignment manipulation applied to it, I suggest opening a separate issue about that as it requires a few more changes to swap this over to an SVG.

[t3chguy]