Avatar offset in membership updates in the TL

[HarHarLinks]

Steps to reproduce

public accessible test case: https://matrix.to/#/!zzGPdcyFqxIOJEijoI:matrix.org/$WHpUKcDce0SzHUAzjQhHVblI1aFlu_Oo-ThzAIcg0PY?via=matrix.org&via=element.io&via=envs.net

Might apply to non-membership events that are rendered similarly, i.e. might share the css with them or not.

Outcome

What did you expect?

vertical centering with enough padding/resizing to accomodate

What happened instead?

see picture

Operating system

arch

Application version

Element Nightly version: 2022070501 Olm version: 3.2.8

How did you install the app?

aur

Homeserver

No response

Will you send logs?

No

[luixxiul]

I suppose it has been fixed with matrix-org/matrix-react-sdk#8965 yesterday, if it is a compact modern layout.

[t3chguy]

Considering fixed given the Nightly predates the fix.

[HarHarLinks]

Yes, my settings are Modern layout + compact layout + Default images.

Updated screenshot using Element Nightly version: 2022070601 Olm version: 3.2.8

• avatar isn't perfectly vertically centered (looks like 0 top but 2 px bottom padding)
• timestamp has different alignment than either avatar or the event text

you judge whether that's as intended or not

[luixxiul]

IMO it cannot be fixed perfectly unless flexbox is applied there, which is a big task (which requires the refactoring of EventTile). Otherwise it would be required to modify position with a couple of pixel, though it is a stupid solution considering the fact that each language has different height of characters (mind Arabic languages, Chinese/Japanese/Korean languages, etc).