Skip to content

Exclude links inside SVG elements (like Mermaid charts) from general link styles

Sarah German requested to merge 136-borked-mermaid into main

What does this MR do and why?

Closes #136 (closed)

Our general link styles were somehow interfering with a Mermaid diagram that includes links inside of it. The specific line that made the bug come up was this:

div.docs-content a {
  /* other styles did not matter */
  transition: .15s linear, border-bottom-color .15s linear;
}

So, let's adjust selectors to only style .docs-content links that are not inside SVG elements.

What a weird one! The only other Mermaid diagram with links (here) does not appear to have the same issue, but it's a different style of chart. 🤷

Screenshots, screen recordings, or links to review app

Before After
image image

Review app: https://new.docs.gitlab.com/review-mr-231/subscriptions/choosing_subscription/#find-your-subscription

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Visit this page: http://localhost:1313/subscriptions/choosing_subscription/#find-your-subscription

The diagram should no longer be cut off. Other links should appear as they have before.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #136 (closed)

Edited by Sarah German

Merge request reports