Left-hand sidebar doesn't scroll

[allanaaa]

As pointed out by @aviannamiller, the left-hand drawer with all the plugin links doesn't scroll, even when the rest of the page is scrolling. Any overflow is hidden, which is a problem when you have a lot of plugins.

This appears to be true on both Firefox and Chrome. We're both on the master branch (3.2-dev4).

Should this have a separate scroll within the sidebar, or should the whole page scroll according to its height? For that we could just add whitespace as needed between the content and the footer.

[zerocrates]

Check out the scrolling-sidebar branch for an implementation of "scrolling sidebar" (you may need to hard-refresh or clear cache to pick up the new stylesheet after switching).

The sidebar already has/had some styling for a scrollbar despite not having one... we'll have to touch base with @kimisgold to see if we can remember if this was previously done and taken out, or assumed to be in place, or what.

[allanaaa]

This looks good! Can we also add some bottom padding to the navigation ul - there is usually an overlay on that part of the browser window when your mouse is over a link.

Should look like

#content-nav ul {
width: 100%;
list-style-type: none;
padding: 0 0 20px 0;
float: left;
clear: left;
margin: 0;

Next question: What determines the display order of the sidebar entries? It would be nice to be able to organize them. (Also an @aviannamiller thought.)

[aviannamiller]

Building on the question about display order and allowing list organization, I am curious how admin customization could be expanded here. Could there be a way for admins to "star/favorite" and "hide" modules to prioritize according to need and use (of course a relevant question for S, as well)?

[kimisgold]

I've added some padding to the navbar, so it should be clearing the browser's url hover content now.

I'm interested in admin customization, especially for the left nav that can get pretty crowded with plugins. We could probably open up a discussion in a new issue to figure out what that might look like as well as the technical logistics involved.

[aviannamiller]

When the page is zoomed to 67% on Chrome, there is a slight overlap that is still happening with the URL overlay. Increasing the bottom padding to 24 px would ensure there is enough clearance.

[zerocrates]

The browsers move that popup out of the way if the thing you're hovering is where the popup would be, right? Does having it overlap cause a problem actually?

[aviannamiller]

That's definitely true for using a mouse, but for keyboard users, once the bottom of the sidebar list is reached/the last item has focus, the URL overlay does not change sides and still slightly covers the text.

I am now also noticing that when tabbing through, once the sidebar begins scrolling, the menu item that has focus is completely covered by the URL.

Should there be some sort of bottom padding that exists outside of the scrolling content and therefore provides clearance in this area regardless of scrollbar position, or is there a better solution here?

[allanaaa]

Ah, yes, the sidebar itself should be top-pinned and only ~95% or so of the container height. A better solution than just adding padding under the last entry.

[zerocrates]

I moved the padding and scrolling around so it should always be present. I haven't increased the size of the padding but we could also do that.

[aviannamiller]

This is much better! Could we try increasing the padding to 36px to match the height of the list items? That seems to help the most with tabbing issues where the padding in its current state on certain page zooms partially covers list items while they have focus (ex. 100% on Firefox).