readthedocs / ext-theme

Read the Docs drop in replacement site templates
2 stars 2 forks source link

Notifications: work around layout shift issues #313

Open agjohnson opened 6 months ago

agjohnson commented 6 months ago

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 commented 4 months ago

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.