Skip to content

Fix styling issues for mermaid diagrams

Dheeraj Joshi requested to merge djadmin-fix-sandbox-styling into master

What does this MR do and why?

Fixes styling issues with the rendered mermaid diagrams. This change is related to sandboxed_mermaid feature shipped in !74414 (merged).

  • Keeps iframe width as full-width
  • Adds a buffer height to render the height correctly

The feature flag is currently enabled for staging, and the issue can be reproduced at https://staging.gitlab.com/djadmin/test-mermaid-charts/-/issues/2.

Screenshots or screen recordings

before after
image image
image image
image image

Full page screenshot

screencapture-gdk-test-3000-flightjs-Flight-issues-41-2022-01-12-13_51_12

How to set up and validate locally

  1. Enable the feature flag
    Feature.enable(:sandboxed_mermaid)
  2. Create an issue / MR and generate mermaid diagrams

MR acceptance checklist

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

Edited by Dheeraj Joshi

Merge request reports

Loading