squidfunk / mkdocs-material

Documentation that simply works

Home Page:https://squidfunk.github.io/mkdocs-material/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Potential Bug: ToC names are cut-off if they are too long

Kigstn opened this issue · comments

Contribution guidelines

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

Entries in the ToC can overflow if they are too long. This results in them being cut off.
image
image

See the bug live

Expected behaviour

Either

  1. A scroll wheel appears
  2. The name is cut-off with dots -> CommunityContentRouteHttp...

Option 2 feels the best from a UX standpoint IMO.

Actual behaviour

The name is cut-off after the maximum display width is reached, as can be seen in the above screenshots.
The full name is still visible when inspecting the HTML element.
image

Steps to reproduce

  1. Give a class / method / attr a very long name
  2. Look at the ToC entry
  3. The ToC entry is cut-off

Package versions

  • Python: 3.10.3
  • MkDocs: 1.3.0
  • Material: 8.3.8

Configuration

site_name: BungIO
repo_url: https://github.com/Kigstn/BungIO
docs_dir: docs/src

theme:
  name: material

plugins:
  - mkdocstrings:
      handlers:
        python:
          selection:
            docstring_style: google
          options:
            show_root_toc_entry: false

System information

  • Operating system: Win10
  • Browser: Firefox 102.0

Thanks for reporting.

This problem is already solved in Insiders. The HTML needed some restructuring, to properly account for new features such as navigation icons, tooltips, and the upcoming navigation status badges. Backporting the new structure to the community edition would require significant effort. For this reason, I'd kindly ask you to use the following quick fix:

.md-nav__item .md-nav__link {
  display: block;
  width: 100%;
}

I'm afraid I can't really offer more at this point, except this fix or to switch to Insiders. However, the restructured HTML for navigation elements will be released together with navigation icons, which I'd expect to be some time next year.