HTML Sidebar contents display over top of requirements text when long headings are used

[wrc-jasonw]

It appears the sidebar menu that is present in HTML export can display over top of content. In my document the first heading is long. When the page is scrolled all the way up the sidebar wraps text as expected. However when the page is scrolled down the sidebar text extends overtop the page requirements and headings.

Screenshots are shown below.

Screenshot: Text over-top heading when scrolled down:

Screenshot: Text over-top requirement when scrolled down further:

Screenshot text wrapped when scrolled all the way to top:

I propose that the sidebar behavior be modified to accommodate documents with long headings. (to prevent the sidebar text from appearing over-top the requirements/headings)

Browser: Firefox 66
OS: XUbuntu 18.04
Commit: 3c9c4d5 ("Update dependencies")

[wrc-jasonw]

I have done some more investigation.

It turns out the NAV bar gets assigned the "position: fixed;" CSS property. When this happens the element no longer inherits the width from its parent element. Instead it is free to expand as wide as it wants. I did a google search and found a stack overflow post with a generic solution: https://stackoverflow.com/questions/16018520/is-it-possible-to-keep-the-width-of-the-parent-element-when-position-fixed-is-a

In short: the recommended solution is the use JQuery to dynamically set the width of the <nav id="TOC" ... > element to the width of its parent. I think should happen when the document is initially loaded and each time the document resizes. Setting the width should cause the text to wrap as expected.

I have a screenshot below showing the element and associated HTML/CSS in Firefox developer mode.

[rickeywang]

I have fixed this in my own build of doorstop long time ago but forgot to merge it upstream. It's now in #353.

[neerdoc]

This is still an issue. Is it possible to fix by adding word-break to the headers?