Readthedocs version selector pops up at unexpected side of screen

[corneliusroemer]

Current Behavior
When I click on the readthedocs version selector, the popup appears not where I clicked (at the bottom left), but at the bottom right of the screen which is probably not how it's supposed to be.

Expected behavior
The popup should open where one clicks. Maybe the position of the button was changed in css but not where the popup appears.

Possible solution
Adjust css of popup? Something like this

.rst-versions .rst-other-versions {
    font-size: 100%;
    padding:12px;
    color: gray;
    display: none;
}

.rst-versions.rst-badge {
    width: auto;
    left: 0px;
    right: auto;
    border: none;
    max-width: 500px;
}

Your environment: if browsing Nextstrain online

• Brave

[tsibley]

I suspect this bug lies in the interaction between readthedocs.org and their sphinx-rtd-theme, possibly some version mismatch between the two and maybe triggered by the middleman of our own subclassed theme.

It is annoying to debug this precise sort of issue locally because it's not possible to (without immense effort) exactly replicate the RTD build process here. Best to use the PR builds to troubleshoot and debug it, instead.

[tsibley]

The rabbit hole was too enticing, and I fell down it.

1. Our doc builds on RTD produce some stubbed HTML for the RTD version selector and info panel, which comes from the base sphinx_rtd_theme's versions.html template.

2. At page load time, JS from RTD recognizes that stubbed HTML and replaces part of it with the result of an API call.

3. The HTML returned by the API call uses the .rst-badge class because our docs build isn't detected as using the "new_theme", which just means a theme named sphinx_rtd_theme.

4. The "badge" styling is intended for non-RTD-based themes and renders the version selector/info panel as a floating box in the lower right corner. Our stubbed HTML uses the (default) non-"badge" styling, while the dynamically-inserted HTML with the full version list uses the badge styling. This mismatch means the collapsed version selector/info panel sits in the lower left corner, anchored to the bottom of the sidebar, while the expanded panel shows up in the lower right, instead of expanding upwards.

I think this leaves us a few options:

1. Switch to using the badge style in our own theme, making the panel float in the lower right. I don't like this, as it obscures page content and is harder to find.
2. Submit a bug (and maybe PR) to RTD to fix this by making the new_theme calculation smarter. This is my preferred long-term approach.
3. Add some CSS to our theme which nullifies the effect of .rst-badge, as @corneliusroemer has suggested above. This is my preferred pragmatic approach, esp. if (2) doesn't seem likely to be resolved.

[tsibley]

While in some RTD/theme code for other reasons today, I had an epiphany: the JS in step 2 above tells the API what the theme is. Since the API doesn't rely on its own information in the decision it makes in step 3 and we control JS for our pages, we can lie in the RTD API call and get the right HTML injected. :-) Implemented in nextstrain/sphinx-theme#17.