Ensure Mermaid diagrams can scroll horizontally
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 |
---|---|
![]() |
![]() |
How to test
- View the architecture diagram in the review app.
- Verify you can use the scrollbar beneath the diagram.