Page is rendered as if TOC is disabled when no header is set (including h1)

Andre601 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

When you create a page without any headers - including no H1 header - will Material for MkDocs automatically use the full width of the body, as if the TOC has been disabled, even if this isn't the case.

Example without a header (auto-generated H1):

Source:

---
title: FAQ
description: Collection of commonly asked questions about ItemsAdder
---

!!! info "Test admonition box"
    Test box to visually show the issue happening.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example with a H1 header:

Source:

---
title: FAQ
description: Collection of commonly asked questions about ItemsAdder
---

# Some header

!!! info "Test admonition box"
    Test box to visually show the issue happening.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Expected behaviour

Material for MkDocs should use the same width for all pages, unless I explicitly disable/hide the TOC and/or Nav.

Actual behaviour

Whenever a page without Headers is rendered will the full width be used, which results in inconsistent displays of pages (Some having fixed width without a TOC rendered while others don't)

Steps to reproduce

Create a page
Fill it with any text but no headers
Let mkdocs serve render the result
Add header to page to compare

Package versions

Python: 3.7.6
MkDocs: 1.3.0
Material: 8.2.8

Configuration

site_name: ItemsAdder Wiki
copyright: Copyright &copy; <a href="https://devs.beer/" target="_blank">LoneDev</a>

site_url: https://andre601.ch/Wiki-ItemsAdder # TODO: Update URL once PR ready.

theme:
  favicon: assets/images/branding/logo_512x512.png
  custom_dir: overrides
  features:
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.indexes
    - content.code.annotate
  name: material
  logo: assets/images/branding/logo_512x512_no_gradient_transparent.png
  icon:
    repo: fontawesome/brands/github
  palette:
  - media: "(prefers-color-scheme: light)"
    scheme: default
    primary: purple
    toggle:
      icon: material/weather-night
      name: Switch to dark mode
  - media: "(prefers-color-scheme: dark)"
    scheme: slate
    primary: purple
    toggle:
      icon: material/weather-sunny
      name: Switch to light mode

repo_name: LoneDev6/Wiki-ItemsAdder
repo_url: https://github.com/LoneDev6/Wiki-ItemsAdder

watch:
- overrides
- .snippets

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/LoneDev6/Wiki-ItemsAdder
    - icon: fontawesome/brands/discord
      link: https://discord.com/invite/sMAE3Na

extra_css:
  - 'assets/stylesheets/extra.css'

plugins:
  - search
  - awesome-pages
  - pagenav-generator
  - ezlinks
  - autolink_references:
      autolinks:
        - reference_prefix: MC-
          target_url: https://bugs.mojang.com/browse/MC-<num>
  #
  # TODO: Prepare wiki once plugin update is out
  #- i18n:
  #    default_language: en
  #    folder_per_language: true
  #    languages:
  #      en:
  #        name: English

markdown_extensions:
  - md_in_html
  - admonition
  - meta
  - attr_list
  - footnotes
  - pymdownx.details
  - pymdownx.superfences
  - pymdownx.highlight
  - pymdownx.keys
  - pymdownx.inlinehilite
  - pymdownx.magiclink
  - pymdownx.tasklist:
      custom_checkbox: true
  - toc:
      permalink: true
  - pymdownx.tabbed:
      alternate_style: true 
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons
  - pymdownx.snippets:
      base_path:
        - .snippets

System information

Operating system: Windows 10
Browser: Microsoft Edge Beta 100.0.1185.27

squidfunk commented 2 years ago

Thanks for reporting. I'm unsure if this is a bug or intended behavior. However, we now have the hiding functionality, so we can normalize the appearance.

squidfunk commented 2 years ago

Fixed in 8264e338f.

Andre601 commented 2 years ago

Fixed in 8264e33.

Thanks for the fix (Can't really try it with my current setup, so I'll wait for a future release).

Just a bit curious why there even was this weird behaviour? Like, when Material auto-generates the H1 header is there no TOC container, but when I manually set an H1 (which wouldn't be rendered in TOC either way) the TOC wasn't removed? Really interesting behaviour tbh, but glad a fix was made.

squidfunk commented 2 years ago

It's likely a side-effect of a refactoring concerning the positioning of the sidebars and main container, which was necessary due to inline positioning of admonitions and the use of display: flow-root. I'm sorry this was causing you trouble.

Andre601 commented 2 years ago

No worries. Visual issues aren't that much of a problem and I'm always glad when I can report those to improve things in one way or another.

squidfunk commented 2 years ago

Released as part of 8.2.9

squidfunk / mkdocs-material