Sticky navigation tabs have wrong spacing in Insiders 4.15.2+

StarfallProjects commented 2 years ago

Contribution guidelines

[X] I've read the contribution guidelines and wholeheartedly agree

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

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

Description

In mkdocs-material-8.2.15-insiders-4.15.2 the top nav menu is small.

It was ok in mkdocs-material-8.2.15-insiders-4.15.1 (rolling back to that version fixed it)

Expected behaviour

A nicely-tyled top nav

Actual behaviour

A not-nicely styled top nav

Steps to reproduce

Install mkdocs-material-8.2.15-insiders-4.15.2
Build or serve

Package versions

Python: 3.10.2
MkDocs: 1.3.0
Material: mkdocs-material-8.2.15-insiders-4.15.2 (note that I haven't tried with non-insiders)

Configuration

https://github.com/n8n-io/n8n-docs/blob/main/mkdocs.yml (I have tested it without the extra_css)

System information

Browsers: tested in Chrome, Firefox, Edge
My OS is Windows 10, but this is also happening on our live site, which is built by Netlify (their build image is Ubuntu-based I believe)

squidfunk commented 2 years ago

Thanks for reporting. You say you tested without the extra CSS, but then I'm wondering why our documentation page doesn't exhibit the same behavior. Have you checked whether the error might be triggered by your overrides? I'm asking, because you ticked the box, but I'm having trouble to reproduce it.

StarfallProjects commented 2 years ago

Still seeing it with overrides removed (my apologies for not checking properly before)

Here is the mkdocs.yml in my test, excluding the nav:

site_name: n8n Documentation
theme:
  name: material
  favicon: _images/favicon.ico
  font:
    text: Open Sans
  language: en
  logo: _images/n8n-docs-icon.svg
  palette:
      scheme: light
  features:
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=navigation+tabs#navigation-tabs
    - navigation.tabs
    - navigation.tabs.sticky
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=navigation+tabs#anchor-tracking
    - navigation.tracking
extra:
  analytics:
    provider: google
    property: UA-146470481-3
  consent:
    title: Cookie and analytics consent
    description: 
      We use cookies (and other similar technologies) to collect data in order to improve our site. You have the option to opt-in or opt-out of certain cookie tracking technologies. For more information on privacy and data management at n8n, refer to our <a href="https://n8n.io/legal/privacy" target="_blank">privacy policy</a>.
markdown_extensions:
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/?h=attr#attribute-lists attr_list is required for several other features. Always enable.
  - attr_list
  # https://squidfunk.github.io/mkdocs-material/reference/admonitions/?h=admoni
  - admonition
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#markdown-in-html
  - md_in_html
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#superfences Used for tags, setting unique templates for certain pages, and other custom frontmatter.
  - meta
  - pymdownx.details
  # https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#highlight
  - pymdownx.highlight:
      linenums: true
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#superfences Superfences is required for several other features. Always enable.
  - pymdownx.superfences
  - pymdownx.tasklist:
      custom_checkbox: true
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#inlinehilite
  - pymdownx.inlinehilite
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#snippets
  - pymdownx.snippets
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#tabbed
  - pymdownx.tabbed:
      alternate_style: true
  - tables
  # https://www.mkdocs.org/user-guide/writing-your-docs/#linking-to-pages
  - toc:
      permalink: "#"
plugins:
  - search
  - literate-nav

StarfallProjects commented 2 years ago

Created a test repo: https://github.com/StarfallProjects/n8n-docs-test

squidfunk commented 2 years ago

Thanks! Does it go away when you remove navigation.tabs.sticky? Otherwise, are you able to further reduce the example?

StarfallProjects commented 2 years ago

Removing navigation.tabs.sticky seems to fix it, yes!

squidfunk commented 2 years ago

Fixed in d3c587b. This bug was exclusive to Insiders and was introduced with the release of navigation.prune. The tabs items received the wrong classes when tabs were made sticky, as they are now rendered as part of the header partial. This partial defined a Jinja class variable that leaked into the tabs item partial. Classes are now properly cleared.

squidfunk commented 2 years ago

Released as part of 8.2.16+insiders-4.16.1.

squidfunk / mkdocs-material