User avatars overlap the message line and timestamp

[Winterhuman]

Steps to reproduce

1. Start Element.
2. Got to any room and hover over a user's message.
3. Notice the timestamp is partially covered up.

Image to show the issue:

Outcome

What did you expect?

The timestamp shouldn't appear underneath the user avatar.

What happened instead?

The message line, and thus the timestamp, is underneath the user avatar.

Operating system

Arch Linux

Application version

Element version: 1.11.1, Olm version: 3.2.8

How did you install the app?

FlatHub

Homeserver

matrix.org

Will you send logs?

Yes

[Winterhuman]

Some additional information:

I tried to see if this was caused by #22852 or #22850, but, changing the DPI didn't do anything. Changing my resolution from 1440p to 1080p also didn't fix this issue, changing the font Element uses also didn't fix the issue.

However, this issue was present in the Element version of #22852 (v1.11.0), I covered up the user's text with a white block which I made sure to match to the pixel, and the issue is present in the image as well; the message line is too high.

This issue can be mitigated by increasing the font size in Element's settings to 15px+, I have it at 13px usually.

[MadLittleMods]

For reference, font size can be adjusted via Settings -> Appearance -> Font size.

Interestingly, the default in the settings is 15 but the actual size on the page is 14px (the problem is not present).

But at 13, the actual size on the page is 11.2px and this is reproducible. Since the range in the slider is 13 - 18 and any value from the slider is probably is considered "safe"/"recommended", we should probably fix the overlap. Although the HTML and CSS could probably be adjusted to accommodate any font size.

[MadLittleMods]

This is a duplicate of #11051 although that specifically tracks Compact layout and the problem is also reproducible in the default Modern layout.

[t3chguy]

Duplicate of #11051
Made the issue broader given the fix should take both issues into account