Expanded names in IRC layout overlap text messages

[UwUnyaa]

Steps to reproduce

1. Set message layout to IRC in preferences
2. Ensure the size of the column used for names is shorter than a given name
3. Hover over the name next to a text message to view the full name

Outcome

What did you expect?

The name should be shown in a readable way.

What happened instead?

The name is expanded, but has no backdrop, causing it to mesh with the text message itself and become unreadable.

Operating system

Arch

Browser information

Chromium 97.0.4692.99

URL for webapp

app.element.io

Application version

Element version: 1.9.9 Olm version: 3.2.8

Homeserver

matrix.org

Will you send logs?

No

[UwUnyaa]

I'd like to work on this issue myself.

[UwUnyaa]

My current attempt at fixing this issue (https://github.com/UwUnyaa/matrix-react-sdk/tree/irc-full-name-overlap) results in this look when hovering over an user name:

I think this requires some agreed upon UX, as it might make sense to make the color brighter than just what is used for hover, as the entire message gets highlighted in it. On the same note, it might make sense to make the actual element look nicer if it's supposed to stand out (something like a matching border-radius).

[germain-gg]

I think this requires some agreed upon UX

I definitely agree with that, could you coordinate with the Element UX team at https://matrix.to/#/#element-design:matrix.org ?