Right panel thread view time stamp overlaps message text

[ohporter]

Steps to reproduce

1. Where are you starting? What can you see?

Timeline open on a room with a preexisting thread consisting of multiple messages.

2. What do you click?

I click on the thread view button in the upper right.

Outcome

What did you expect?

I expect to see the message with timestamps separated from the message text like in the timeline view of messages.

What happened instead?

The message timestamp slightly overlaps the message text as shown in the following image.

Operating system

Debian 11

Browser information

Google Chrome Version 98.0.4758.80 (Official Build) (64-bit)

URL for webapp

Element version: 1.10.2 Olm version: 3.2.8

Application version

Element version: 1.10.2 Olm version: 3.2.8

Homeserver

Synapse 1.52.0

Will you send logs?

No

[HarHarLinks]

Browser information
Version 98.0.4758.80 (Official Build) (64-bit)

OK but which browser? 😄

[ohporter]

Browser information
Version 98.0.4758.80 (Official Build) (64-bit)

OK but which browser? smile

Chrome..fixed above.

[t3chguy]

This issue is not exclusive to right panel or threads timelines, with certain font sizes it can happen in the main timeline too. Needs some design input on how we handle this, whether to always reserve a bit more space to have enough for AM/PM, to do it conditionally, to scale based on font-size, etc

[germain-gg]

On hover, the following can happen. @janogarcia would be great to have your input on how to cater for all those cases?

[janogarcia]

@gsouquet This is mostly an issue with the current implementation, which deviates from the design spec in some places. It should be solved by fixing the issues I shared here: #21502 👍

[germain-gg]

Closing in favour of #21502

[t3chguy]

#21502 doesn't currently cover this and its already a mess so would prefer splitting out issues

[janogarcia]

@t3chguy With the changes we recently implemented there's plenty room for it (screenshot below from current develop). Moreover, with the new spacing updates that I requested there will be an additional 4px there.

[t3chguy]

@janogarcia as per the above, that space is not enough for larger font sizes which can be chosen in Settings > Appearance

This issue is not exclusive to right panel or threads timelines, with certain font sizes it can happen in the main timeline too. Needs some design input on how we handle this, whether to always reserve a bit more space to have enough for AM/PM, to do it conditionally, to scale based on font-size, etc

[janogarcia]

I'm closing this one as it's been addressed in a separate issue/PR as mentioned above.

• Implement improved spacing for the thread list and timeline. #21759
• Implement improved spacing for the thread list and timeline matrix-org/matrix-react-sdk#8337

---

Text size: 15px (default)

Text size: 16px

Text size: 18px