Scrollable Views

[daftgopher]

Inspired by my tweet to Syntax.fm (https://twitter.com/syntaxfm/status/1080239058926948353) ...someone over there thought it was a good idea so I figured I'd take a crack at it!

This PR allows both the show notes and the show list divs to be scrolled independently of each other. Now you can keep the currently selected show in view as you scroll through its show notes. As a bonus, it also scrolls to the top of the show notes container whenever a show is selected. No more blank show notes sections when picking a show towards the bottom of the list!

One big thing - I bumped React to 16.8.0.alpha (the one with hooks) as part of this PR. This was to make the bit of functionality that scrolls to the top of the show notes container a bit easier to do without converting the entire showNotes container into a class component. If preference is not to leap into the future of React just yet, happy to provide an alternate way of accomplishing this.

[denno020]

I noticed this issue for the first time today when trying to find an old podcast. I wonder if it could be simply fixed using CSS position sticky? Allow the overflow inside the show notes container to scroll-y, and make the show notes container position sticky top inside the right hand column However, I'm not familiar with the HTML structure so not sure if there is a "right column" container around the show notes container

[itwasmattgregg]

@denno020 i agree with you it could be done with this addition to the episode list column only:

{
    overflow-y: scroll;
    max-height: calc(100vh - 100px);
    top: 100px;
    position: sticky;
}

[cuylerstuwe]

I actually just made my own PR for this, right before looking at existing PRs to find this!

I should've known that I wasn't the only one having this issue.

If you want the live site to follow this behavior (but can't wait for the PR to be merged and the changes to be deployed):

• Install Tampermonkey.
• Install this userscript.