Sticky notification bar overlaps and hides search bar on website

[avats-dev]

Describe the bug

The new alert bar on PYPI overlaps and hides search bar on pypi when on a particular module page.

Expected behavior

Obviously one should have access to the search bar and I think there should be an option (like a ❌ to remove the bar if one need so). It should be placed in a way that pushes the whole screen below by its height and is above to avoid any usage issues.

Also, if a user opts to visit and provide feedback from there, the bar should not be there then but currently this is not the case.

To Reproduce

Visit here or any other similar page.

My Platform

OS : Windows 10/11
Chrome : Version 94.0.4606.71 (Official Build) (64-bit)

Additional context

[ewjoachim]

Hm, it works correctly if we click on a link leading to a project page, but it doesn't if we reload the page (under firefox 93)

EDIT: never mind, it was probably a cached file. Problem occurs on every page now.

[ewjoachim]

I believe this is the file responsible for shifting the body with the width of the sticky element:

https://github.com/pypa/warehouse/blob/main/warehouse/static/js/warehouse/utils/position-warning.js

[ewjoachim]

Hm, I could be wrong but it might be a race condition:

This line:
https://github.com/pypa/warehouse/blob/c6392cb8035d8f3f570dee4f4bfe664d1d2e17ef/warehouse/static/js/warehouse/index.js#L109

Says that within 200ms of the document being ready, the height of the HTML element is computed and added to an inline padding on body.

The flash messages are computed by loading a different page and embedding its partial-html content into our page. So depending on the total timing, the page already has the content or not, which results on the bar being sometimes correct, sometimes incorrect. Not 100% sure it's that, but this could be the reason.

[asottile]

this makes pypi search nearly unusable -- as a workaround I'm using this adblock rule:

pypi.org##.notification-bar.notification-bar--banner

[yeraydiazdiaz]

Interesting we never noticed this, the markup and SCSS are quite old:

• https://github.com/pypa/warehouse/blame/7fc3ce5bd7ecc93ef54c1652787fb5e7757fe6f2/warehouse/static/sass/layout-helpers/_stick-to-top.scss#L23-L28
• https://github.com/pypa/warehouse/blame/dfa560471fb361770ee897ee160010505836bd1f/warehouse/templates/base.html#L156

[ewjoachim]

Maybe it's linked to the new banner feature, and maybe the fastly caching parameters for the banner are slight different, or something ?

[pradyunsg]

IIUC, this is the first time we're using #9656.

[yeraydiazdiaz]

Just noticed this only happens to me on Firefox, Chrome and Safari push the content down correctly. (I'm on Mac Big Sur, btw)

[ewdurbin]

For now I've disabled the banner.

[ewdurbin]

I'm not positive if #10204 resolves this or not, so will leave this open. After it deploys I will re-enable the banner and see what people report.

[ewdurbin]

Confirmed that #10204 does not resolve this issue.

[miketheman]

I've confirmed today that the notification banners no longer overlap with the search bar on the index and any package page, in desktop and mobile modes.

We've also since introduced the ability to dismiss certain banners (if the admin sets it so).

Closing since it doesn't appear any longer, but if any reporter still has this problem, please reopen with details like browser version, pages, and a screenshot with the problem.