Scroll sidebar on repositories #3349

We can do that if it fits the viewport vertically like we do for the conversation sidebar

Yes, it's a something similar behaviour :-)

This could be as easy as adding a new CSS selector - .BorderGrid to source/features/sticky-conversation-list-toolbar.css ( and possibly renaming the file ). However, most repositories have many sections that usually do not fit in the viewport height. What do we do about that?

Personally, I like to see the Languages section, but most often, I have to scroll to find it. Making the sidebar sticky would mean that I have to get the bottom of the page before I can see the Languages section.

What about allowing to scroll just only itself, like a subsection in the page?

@piranna scrollable frames on web pages don’t belong to this decade 😃

@shinenelson we already have a solution for sticky sidebars, let’s try to use that one first. This could be part of sticky-conversation-sidebar

@fregante I did try hooking into sticky-conversation-sidebar but I hit 2 problems :

1. the .rgh-sticky-sidebar class is toggled with the condition sidebarHeight < window.innerHeight. As mentioned previously, most repositories have sidebar sections that will invalidate the expression, hence not enabling stickiness on the sidebar.
2. the value of top is hard-coded in the CSS of .rgh-sticky-sidebar.

For 2, we could create an extra class for the top ( and z-index too, if required ) value specifically for the different kinds of elements ( for example, rgh-conversation-sidebar, rgh-repo-sidebar, rgh-issues-list-toolbar ). If we were to do this, then we could have a global class called rgh-sticky with position: sticky and use it wherever we wanted to make sticky elements. Even then, it still does not solve 1 though.

For 1, if we were to over-engineer, we could hide / remove a few sections that could be un-necessary ( Sponsors, Contributors and empty sections like Packages ) and then make the sidebar sticky. But then, that could be a new feature altogether though.

It was when I was digging around the CSS that I found sticky-conversation-list-toolbar and tested with that and it worked ( at least for making the sidebar sticky ).

1. most repositories have sidebar sections that will invalidate the expression, hence not enabling stickiness on the sidebar.

Right. That's what we want. If it doesn't fit, it can't be sticky. That's the right behavior.

2. the value of top is hard-coded in the CSS of .rgh-sticky-sidebar.

That can be easily fixed by extending the selector. e.g. (with the right selectors and value of course)

.repo .rgh-sticky-sidebar         {top: 123px}
.conversation .rgh-sticky-sidebar {top: 456px}

we could hide / remove a few sections that could be un-necessary

That's actually what we do in clean-sidebar, it's an unrelated feature. A similar feature could also be added for the repo home (but the code is likely completely different in this case)

found sticky-conversation-list-toolbar

That feature does not take the height into consideration, so it's not a good match.

That's actually what we do in clean-sidebar, it's an unrelated feature. A similar feature could also be added for the repo home (but the code is likely completely different in this case)

We could probably extend clean-sidebar to the repository root page as well to clean out empty sections. Releases and Packages are the only 2 sections that are in the sidebar even if they are empty. Other sections are hidden by default. If we extend clean-sidebar, then it would supersede #3572 and possibly make many more repositories 'stickable'.

Edit : Looking at the code, I see a whole refactoring exercise on clean-sidebar before we can 'extend' it for repo root. So now the question is whether to refactor clean-sidebar to make it work for repo root or duplicate most of the code and change the class names to make it work for repo root. I am for the refactoring task and am willing to give it a try too.

We could probably extend clean-sidebar

Unlikely. That feature is fine-tuned to clean the issues sidebar, as you noticed and as I previously mentioned:

but the code is likely completely different in this case

Given that clean-sidebar.tsx is already huge, it's best to write another feature for the repo root.

Edit: but I think #3566 and #3573 are enough already

Given that clean-sidebar.tsx is already huge, it's best to write another feature for the repo root.

Can we merge it with #3573 and perhaps rename that feature?

• releases-tab already hides the section because it makes it redundant
• hide-zero-packages works on both profiles and repos

There's no reason to either extend an existing feature nor add a new one, it all already works out.