`sticky-sidebar` disappears when expanding fields of new Projects

Description

I am using Refined GitHub in a repository where issues get a lot of labels, and we use multiple GitHub projects (both old and new) - so our sidebars are pretty looooong. As the issues themselves are also long with many comments, sticky-sidebar is absolutely necessary to stay sane and be able to access labels and projects all the time. Thank you for that, as usual!

Unfortunately recently I noticed that when I expand one of the “new projects’” widgets (they can have multiple “fields” that all can have an input field or dropdown etc) the stickyness breaks and the whole sidebar disappears to the top, to its usual static location 😿 I have to scroll back up to edit the fields, and only a reload makes the sidebar sticky again - until the next edit.

After some experimentation I could figure out that a pretty specific situation needs to happen - but of course our repository consistently does that. So I created a reproduction issue: https://github.com/janpio/refined-github-sticky-sidebar-projects-bug/issues/1

If I am understanding the problem correctly, the sidebar (via labels and projects and their fields) needs to be taller than the “viewport” where the sidebar could be displayed. I left instructions below that allow me to persistently reproduce this in an incognito window with only Refined GitHub enabled.

Here are also some screenshots:

Before, working as expected:

After clicking + 7 more on the sidebar - no more sticky sidebar:

Ahhh, here it is, with the fields expanded:

How to replicate the issue

Go to https://github.com/janpio/refined-github-sticky-sidebar-projects-bug/issues/1, scroll to the end of the page, make sure your browser window is just tall enough to display the current right hand sidebar (with the projects), click on + 7 more in the Project “widget” on the right side - and then observe the “sticky” sidebar disappear to the top.

Extension version

22.8.23

Browser(s) used

Chrome Version 104.0.5112.81 (Official Build) (64-bit)

[fregante]

Update: I tried adding a scrollbar as a fallback and it failed. The scrollbar effectively triggers “overflow: hidden” so the popups in the sidebar (in red) are cut off:

[fregante]

Yeah, ResizeObserver looks at the size of the element on the page and triggers the calculation to determine whether the sidebar should be stuck.

If we disable it, it won’t suddenly become unstuck like in your demo screenshots.