long unbreakable headings break mobile table-of-contents view

[thesuperzapper]

Context

No response

Bug description

If you have a very long unbreakable heading in a page, the table of contents view (in the mobile sidebar) will not wrap it, and it will be scrollable off-screen.

I am not sure what the most desirable behavior here is, e.g. force wrapping (even in the middle of words), or making an ellipsis, or something else.

Related links

• Icon overlaps text in mobile menu #84

Reproduction

9.4.8-long-headings-break-toc.zip

Steps to reproduce

1. Create a very long heading in a page (which is not breakable with spaces, dashes, etc)
2. Open page on mobile
3. View sidebar table of contents
4. Notice that the heading link goes off page in a way which is not scrollable on mobile that

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[alexvoss]

Coming back to this, I should have looked at your reproduction first. I do not get the behaviour you describe when I use the Insider version of Material but when I use the public version I get the same result as you do. This does seem to be an unintended divergence between the two versions to me.

This is with insiders:

[alexvoss]

I think I have spotted where the problem lies. In the toc-item partial in the public version, there is no span that attaches the .md-ellipsis class. That is present in the Insiders version. Will do a PR.

[squidfunk]

Keeping open, until released.

[squidfunk]

Released as part of 9.4.9.