Fix image avatar alignment in notifications

[davwheat]

Fixes #2905

Changes proposed in this pull request:

Fixes issue introduced with #2822 where image-based avatars would display misaligned in the notifications list.

Reviewers should focus on:

Are there any other issues with Notification avatars? Can anyone think of a less hacky way to achieve this?

Screenshot

Before

After

Confirmed

• Frontend changes: tested on a local Flarum installation.

[SychO9]

Any reason for doing this instead of changing align-items: baseline; to align-items: center; in .Notification ?

[davwheat]

Doing center will make the avatar centrally aligned on multi-line notifications, which doesn't match the style in previous versions, or the style of the text-based avatars.

Instead, we want the avatar in line with the first line of notification text

[SychO9]

Doing center will make the avatar centrally aligned on multi-line notifications, which doesn't match the style in previous versions, or the style of the text-based avatars.

It doesn't though because of how the notification grid is structured.

[davwheat]

If the title is multi-lined, it does.

[SychO9]

If the title is multi-lined, it does.

Ah, I see what you mean now, it's because the image itself is a cell of the grid that we can't just change its vertical alignment to middle. Another way of fixing this would be to wrap the notification avatar img with a div or span, then setting the vertical alignment of the .Avatar to middle.

[davwheat]

I'd agree with something like that, but it could break 3rd party styles, annoyingly :(

[SychO9]

True, we could do that for 2.0, but better avoid for 1.x