Navigation renders triangle markers and list elements on a seperate line (firefox)

[HaraldKi]

Search terms

navigation rendering, firefox, css

Expected Behavior

The navigation should be rendered in the form > topic in all browsers and settings.

Actual Behavior

The navigation renders like

>
  topic

Steps to reproduce the bug

Navigate to https://harald.codeberg.page/jsonaccess/doc/ to see the effect.

NOTE: for me this happens in firefox 119.0.1 on Linux, not with chromium and it may be a quirk depending on actual font sizes used. I did not mess with font-sizes actively, just guessing that these may be slightly differing on systems.

I can fix this with a minimal change to the CSS: (see screenshot) it suffices to replace calc(100% - 1.5rem) with calc(100% - 1.7rem) or just use em instead of rem. The calculation seems to be just a bit over-optimized. I am not saying this is the solution as I did not dive into all the details of the CSS. Maybe the width is not needed at all. Maybe the surrounding element should be display: flex.

Environment

• Typedoc version: 0.25.4
• TypeScript version: 5.3.2
• Node.js version: v16.13.2
• OS: DISTRIB_DESCRIPTION="Ubuntu 22.04.3 LTS"

[Gerrit0]

Huh, that's odd... Firefox is all I use, and it works as expected on my Fedora box.

Not sure why I didn't use flex display from the start here, that seems like a much better styling solution 👍