Wrong highlight order in the TOC (for wide screen)

[aborruso]

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

In my 2560 x 1028, when I click on a menu in the right TOC, it remains with the active CSS style the menu previous to the one I clicked on.
If I resize my windows, all works properly.

In this GIF you can see it in action

Expected behaviour

The active CSS style should be applied to the menu item I have clicked on.

Actual behaviour

The active CSS style is applied to the menu item previous to the one I clicked on.

Steps to reproduce

To use a resolution as the one I use and to browse https://ondata.github.io/guidaVisiData/ricette/

Package versions

• Python: python --version

Python 3.9.2

• MkDocs: mkdocs --version

mkdocs, version 1.2.3

• Material: pip show mkdocs-material | grep -E ^Version

Version: 8.1.3

Configuration

site_name: Guida VisiData
site_url: https://ondata.github.io/guidaVisiData/

System information

• Operating system: debian 11
• Browser: Chrome OS

[squidfunk]

Thanks for reporting. Indeed this is an issue and probably related to the upsizing of the overall content.

[squidfunk]

Fixed in a7aa552.

[aborruso]

Thank you very much @squidfunk

[squidfunk]

Released as part of 8.2.3.