Avatar offset in membership updates in the TL

element-hq / element-web

A glossy Matrix collaboration client for the web.

https://element.io

GNU Affero General Public License v3.0

11.12k stars 1.98k forks source link

Avatar offset in membership updates in the TL #22744

Open HarHarLinks opened 2 years ago

HarHarLinks commented 2 years ago

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?

luixxiul commented 2 years ago

I suppose it has been fixed with https://github.com/matrix-org/matrix-react-sdk/pull/8965 yesterday, if it is a compact modern layout.

t3chguy commented 2 years ago

Considering fixed given the Nightly predates the fix.

HarHarLinks commented 2 years ago

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 commented 2 years ago

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).