Skip to content

Ensure Mermaid diagrams can scroll horizontally

Sarah German requested to merge 1191-mermaid-scrollfix into main

Why

Mermaid diagrams that sit above a heading are not horizontally scrollable. See #1191 (closed).

This is due to how we set an invisible negative margin above headings. The negative margin allows the heading to be visible when linked via an anchor, but it overlaps the element above, making it unclickable. See https://css-tricks.com/hash-tag-links-padding/#aa-more-from-alex-wolfe

Screenshots

Before After
image scrollable

How to test

  1. View the architecture diagram in the review app.
  2. Verify you can use the scrollbar beneath the diagram.

Merge request reports