Content Tabs Not Full Width on Mobile

[Miles Stötzner]

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

Content Tabs are not correctly displayed when the screen width is less than 720px.
The Content Tabs Bodies have a padding while the vertical line of the Content Tabs Navigation has not.

Also occurs at the mkdocs-material docs, see https://squidfunk.github.io/mkdocs-material/getting-started/#with-docker

Expected behaviour

Content Tabs Bodies should have full width on screens less than 720px width - such as, e.g., Code Blocks.

Actual behaviour

Content Tabs Bodies have some padding while the horizontal line between the Navigation and Bodies is full width on screens less than 720px width.

Steps to reproduce

1. Create some Contant tabs
2. Resize the window to less than 720px

Package versions

• Python: 3.8.10
• MkDocs: 1.3.0
• Material: 8.3.6

Configuration

site_name: Content Tabs Bug

theme:
  name: material

markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

System information

• Operating system: Windows 10
• Browser 1: Chrome 102.0.5005.115 (Offizieller Build) (64-Bit)
• Browser 2: Firefox 101.0.1 (64-Bit)

[Martin Donath]

Thanks for reporting. This is a deliberate design decision, which means that content tabs are working as intended. The reason is that content tabs can contain arbitrary content, not only code blocks. Thus, all content would stretch to the full width, removing the padding for body copy. Closing, as it's working as intended.

If you still want this behavior, you can accommodate Material's styles via additional CSS.