Restyle in-page navigation of docs.gitlab.com

Problem to solve

Visual styling of the in-page navigation for our documentation site is visually inelegant.

• There is no negative space to the left of menu items, and long titles wrap awkwardly, with the left margin of the second line aligning with the caret instead of the text above.
• Links are preceded by a caret, which implies they are expandable (they're not).
• Questionable that anchor link to "Help and Feedback" is needed. Before clicking, I was uncertain where it would take me, assuming I would navigate to a separate support page.
• list-style-position displays as inside instead of outside, causing a strange wrapping effect with extra lines aligned with the bullet.
• Borders above and below the menu are visual clutter.

Intended users

Users of GitLab's docs site

Further details

Proposal

Simple visual restyling of in-page navigation

What does success look like, and how can we measure that?

In-page navigation:

• Is easy to see
• Is not distracting from the scannability of the rest of the page
• Is aligned appropriately, so that content wraps elegantly
• Follows brand/Pajamas standards
• Takes up an appropriate amount of real estate for the importance of the content