Notifications: work around layout shift issues

[agjohnson]

With the introduction of async loaded notifications, it can be quite frequent that the UI introduces layout shift, as notifications are loaded inline at the top of the page. We will need to account for this in some way, either with hardcoded space, overlapping notifications, floating notifications at the top of the window, or some other intervention.

[agjohnson]

I gave a try to hardcoding space for notifications between the main content and the header and was not happy with this option.

Without a notification the gap was too big and with a notification the space was too cramped. I only allowed for one notification worth of space. So two notifications would still involve CLS, though I would expect room for a single notification to be enough for the majority of cases.

[agjohnson]

I tuned the spacing a bit more and like this option a little bit more, but it's still a lot of empty space without any notifications. Multiple notifications is maybe a good reason to inflict CLS, it might spur the user to actually close some of the notifications.

Here is the project list with an example:

Screencast.From.2024-12-23.15-58-17.webm

Without a notification it looks pretty excessive though:

I'm going to play around with shrinking the notification down vertically next, I don't know if I like this plan though.