Version dropdown expands behind theme toggle & search bar

[dimrozakis]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

Depending on window width, site title length, and length of versions in the version selection dropdown, the dropdown can stretch on the area that contains the light/dark toggle and search bar. When that happens, are not hidden behind the uncollapsed version dropdown.

Expected behaviour

1. Either, the dropdown should expand above, not behind other topbar elements,
2. or the dropdown should expand to the bottom of the topbar, similar to the language selector dropdown (as seen in the following screenshot)
   

Actual behaviour

The dropdown expands behind the theme toggle & search bar (could also affect other elements like the language selector, haven't checked)

Steps to reproduce

1. Configure a long enough site title.
2. Configure several versions, few of them quite long.
3. Set a medium window size.
4. Expand the version dropdown.

Note: It's easier to reproduce the issue if the currently selected version is one of the short ones. This will cause the title to be truncated less, and the version dropdown to be positioned close to the theme toggle & search bar. Expanding the dropdown then will cause it to expand behind the theme toggle & search bar.

Package versions

Python: python --version: 3.9.6
MkDocs: mkdocs --version: 1.2.3
Material: 8.1.10-insiders-4.8.0 (but happens with older versions as well)

Configuration

-

System information

• Operating system: Linux Mint 19.1
• Browser: I can reproduce with Chromium 97.0.4692.71 & Firefox 96.0.3

[squidfunk]

Thanks for reporting. That shouldn't happen. Can you share the site where this is happening? It would make my work much, much easier, as it's probably only a z-index problem.

[dimrozakis]

Hi @squidfunk

Unfortunately I cannot share the site where I'm experiencing this since it requires authentication. But I was able to reproduce it in the arduino docs site by doing the following:

1. Go to https://arduino.github.io/arduino-cli/0.21/
2. Use dev tools to change the text of the site title in the topbar to Arduino CLI Arduino CLI Arduino CLI Arduino CLI Arduino CLI.
3. Use dev tools to change the value of the last version in the version selector from dev to dev dev dev dev dev.

Now (while in the 0.21) version, hover over the version selector and you'll see this:

I hope this helps.

[squidfunk]

Thanks! Mitigation:

.md-version__list {
  z-index: 3;
}

[squidfunk]

Fixed in 93a5541.

[squidfunk]

Released as part of 8.1.11.