Fix always showing dead scrollbar in flyout #835
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stop always showing a scrollbar on the flyout menu, though preserve flyout menu scrolling if the content doesn't fit in the viewport.
This one has bothered me for a while. At some point we introduced an always-on scroll bar:
For the vast majority of cases, the scroll bar isn't needed -- this content would only be scrollable if you had a large number of versions or your viewport was very short.
This makes only the flyout menu content scrollable and it makes the scrollbar only show when needed. It gets rid of the scrollbar over the
.rst-current-version
header element -- this element shouldn't be part of the scrollable content.In order to do this, we control the version menu height from the child
.rst-other-versions
instead of from the parent.rst-versions
element. We can't force the height on the parent.rst-versions
like we were, because that makes it much harder to also control the height (and set the content to scrollable) on the child.rst-other-versions
at the same time. Controlling the spacing and positioning of the scrollable content is very hard with the part div height set.So instead, we set the height at the child
.rst-other-versions
and let that dictate the height of the.rst-versions
div. Because this div doesn't include the height that the.rst-current-version
header element takes up, we can't setheight: 100%
, or the.rst-current-versions
element would not be visible on flyout menus that exceed the viewport height.Instead,
80vh
or90vh
is used here for a max-height, based on a media query. This is an approximation to include the.rst-current-version
header element in our height calculation -- at viewport breakpoint height of 410px, 90vh = 369px, leaving 41px (the height of the.rst-current-version
element).Ideally, we could restructure the html to allow
.rst-current-version
to float in a way that allowed the child.rst-other-versions
to occupy the full height of the.rst-versions
parent element. We can settmax-height: 100vh
or perhapsmax-height: 100%
in this case.Fixes #791