Make flyout menu scrollable

[mgeier]

WARNING: I have no clue about SASS, and this is totally untested.

This is my attempt to implement this at the proper place: readthedocs/readthedocs.org#7375

[mgeier]

Some values are overwritten, which is confusing:

badge_only.css has bottom: 20px; which is overwritten by readthedocs-doc-embed.css, which uses bottom: 50px;.

The overwritten value is why I chose max-height: calc(100vh - 50px) here.

Probably the override should be properly applied here instead?

[agjohnson]

Probably the override should be properly applied here instead?

Most likely. Some of those rules in that doc-embed.css file are just hacks around releasing this package.

Though, perhaps for this PR, they can still live separate, to just isolate the scrolling change.

[mgeier]

I think the remaining question is whether to use 50px or 20px.

Since the 20px is overwritten anyway, I've changed it to 50px: e66e4b1

With this, the override in readthedocs-doc-embed.css could be removed at some point: https://github.com/readthedocs/readthedocs.org/blob/7ac39eefb6e4c681ded6b1bb51e5c5d027e7551b/media/css/readthedocs-doc-embed.css#L9

[mgeier]

Any news on this?