Specifying language for in-text code blocks does not display correctly on mobile/small screens.

• I’ve read the contribution guidelines and agree with them

I’ve found a bug and checked that …

• … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … the documentation does not mention anything about my problem
• … there are no open or closed issues that are related to my problem

Description

When I specify the language for code inside normal text (not in code blocks) it does not display correctly on mobile/small screens. Image below:

I am using the following markdown to specify code: (#!language)

inside (`s) #!js console.log(“help me!”);

Expected behavior

I expect the code to not wrap over other text, like when you use simple code highlighting (code here).

Actual behavior

Code in text, when language is specified, wraps over other text (see image above)

Steps to reproduce the bug

1. Insert code into documentation using the following: #!language code here.
2. Either build docs or serve and open in mobile/shrink browser screen.

Package versions

• Python: 3.85
• MkDocs: 1.12
• Material: 7.1.3

Project configuration

site_name: Nick's Docs
theme:
  name: material
  logo:  //removed
  favicon:  //removed
  features:
    - navigation.instant
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
  static_templates:
    - 404.html
  font:
    text: Roboto
    code: Source Code Pro
extra_css:
  - stylesheets/extra.css
plugins:
  - search
  - minify:
      minify_html: true
extra_javascript:
  - javascripts/extra.js
  - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML
markdown_extensions:
  - pymdownx.arithmatex
  - attr_list
  - codehilite:
      guess_lang: false
      linenums: true
  - pymdownx.inlinehilite
  - pymdownx.superfences:
  - admonition
  - lightgallery
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.magiclink
  - pymdownx.mark
  - pymdownx.inlinehilite
  - pymdownx.smartsymbols
  - pymdownx.superfences
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tabbed
  - pymdownx.tilde
  - toc:
      permalink: false
extra:
  social:
    - icon: fontawesome/solid/images
      link: //removed
    - icon: fontawesome/solid/blog
      link: //removed
    - icon: fontawesome/brands/linkedin
      link: //removed
    - icon: fontawesome/brands/github
      link: https://github.com/tpbnick
    - icon: fontawesome/brands/instagram
      link: //removed
    - icon: fontawesome/regular/envelope
      link: //removed
  extra_css:
    - stylesheets/extra.css

System information

• OS: Windows 10

• Browser: Edge/Chrome

[squidfunk]

I tried to set the font to reproduce with the same font “Source Code Pro”, but still, everything works. Honestly, this seems to be a problem with your system setup. If you can manage to provide a reproducible case, we can reopen this issue, but until then it’s nothing we can help you investigate, as we’ve never seen something like this before. Also, there have been no changes that could be related to this lately.

[facelessuser]

I see no issues. If I were you, I’d start by removing custom CSS (as it appears you have some) and remove all extensions except those critical to showing the inline code in question.

If it works after that, I would begin adding in other plugins and the “extra” CSS to try and determine what is altering the output to break like this.

I say this I am the author of pymdownx.inlinehilite and I use it heavily along with MkDocs Material, and I am not seeing issues on any of my sites or seeing in locally when I update to the very latest Material.