Display emotes like normal messages

[Johennes]

Default layout before

Default layout after

Bubbles layout before

Bubbles layout after

IRC layout before

IRC layout after

Advantages

• Time is visible (default layout)
• User name gives visual hint that it is clickable (default & IRC layout)
• Reading flow not broken because style is consistent with normal messages (all layouts)

Disadvantages

• Slightly more vertical space needed (default & bubble layout)

Fixes: element-hq/element-web#2284

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Display emotes like normal messages (#8420). Fixes timestamp is hidden by the avatars on emotes element-hq/element-web#2284. Contributed by @Johennes.

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

[Johennes]

Should be enough for design review. I won't bother with fixing the tests before.

[robintown]

This could use screenshots of bubble layout and IRC layout as well

[turt2live]

clearing code review while design/product weigh the feature

[Johennes]

This could use screenshots of bubble layout and IRC layout as well

Good call @robintown. I missed that the layout differs significantly in these modes. 🤦‍♂️

Added screenshots above.

[kittykat]

Hi Johennes, thank you for submitting a PR.

From a product pov, we don't want to show emotes like normal messages because they are supposed to indicate an action rather than something that a person says so they should be formatted differently. I'm going to close this PR for this reason, but if you would like to offer a fix for the timestamp issue, that would be appreciated. The best way to do that may be to add padding under the profile pic in the timeline.