Newer responsive design PR messes up scrollbars and other sections of the page

[SheathedBlade]

Just noticed for my site that the scroll bars for the side bar sections are rendered weirdly. I had customized the webkit scrollbar for the ul.overflow and body tags (you can kinda see it on the 2nd image). In addition, with the appearance of these default scroll bars, the fading of the overflow disappears. These scroll bars appear to be not of the overflow class tag but for the entire section itself (like the entire explorer section rather than just the li items).

I know that for the right sidebar, I had forced max-height values to fit my needs for the website, and the default chunky scrollbar only appears at around 1030~ pixels in height.

Here's my repo is necessary: https://github.com/SheathedBlade/The-World-of-Luciradis

Examples down below:

[SheathedBlade]

I'd also like to note that for the page body, if there's not enough content to fill the page (like placeholders), it'll have massive space between the side (which is a result of the responsive pr change)

Perhaps due to setting margin-left and right to auto for both the page body (center) and the footer. This one is probably a me problem and I can just add some lines into the custom scss file to fix it by setting the horizontal margins to 0, but I think it's worth bringing up.

[saberzero1]

Can you check if #1440 fixes the mentioned issues?

[SheathedBlade]

Mmm it doesn't fix the issue of the fading transition for the list overflow, and it sets the section's size such that the scroll bar encompasses the entire section and not just the list. For example, I ideally want the header of the sidebar section (Explorer, Table of Contents, Backlinks) to not scroll with the list, example below:

It used to be that the header for the sections stayed while the list underneath was the one that was affected by scrolling.
Also I had it in custom.scss to set the ul.overflow element to a certain size and that was what caused the double scrolling problem (and the scrollbar that I customized appeared there).

[saberzero1]

Mmm it doesn't fix the issue of the fading transition for the list overflow, and it sets the section's size such that the scroll bar encompasses the entire section and not just the list. For example, I ideally want the header of the sidebar section (Explorer, Table of Contents, Backlinks) to not scroll with the list, example below:

It used to be that the header for the sections stayed while the list underneath was the one that was affected by scrolling. Also I had it in custom.scss to set the ul.overflow element to a certain size and that was what caused the double scrolling problem (and the scrollbar that I customized appeared there).

Thanks for the feedback. I'll post a fix for this tomorrow.

[saberzero1]

I think all issues should be addressed now, can you please verify? Thanks!

[SheathedBlade]

I see a new issue pop up, looks like for backlinks, having pop up window enabled breaks it:

Also, when collapsing the explorer/toc sections, the dropdown effect effectively makes the list disappear. Looks like there is a retroactive html style applied to it that sets the max height of those sections to like 16 pixels.

[SheathedBlade]

In addition: the scrollbar is unusally placed near the letters as opposed to the end of the section. It looks like the flex box unintentionally pushed it over.

Also if that scrollbar change can be made to the explorer section, that would be great as well.

[saberzero1]

I see a new issue pop up, looks like for backlinks, having pop up window enabled breaks it:

Also, when collapsing the explorer/toc sections, the dropdown effect effectively makes the list disappear. Looks like there is a retroactive html style applied to it that sets the max height of those sections to like 16 pixels.

In addition: the scrollbar is unusally placed near the letters as opposed to the end of the section. It looks like the flex box unintentionally pushed it over.

Also if that scrollbar change can be made to the explorer section, that would be great as well.

The second part has already been fixed, please update to receive.

The first part should be fixed with #1442

Please note that the fix for popover hovers requires a removal of the gradient effect at the end of the overflow lists. This has to do with the nature of the problem. The gradient :after element requires position: relative on the ul.overflow. Adding position: relative is what caused the problem with the popover. I'll make a separate PR to re-implement the gradient effect, as IMO a working popover is more important in the short term (functional popovers vs small cosmetic effect)