Skip to content

Fix styling issues related to sandboxed mermaid charts

Dheeraj Joshi requested to merge djadmin-fix-mermaid-width-styling-issues into master

What does this MR do and why?

It sets the iframe element's width during creation. Setting it dynamically after the DOM is created, doesn't affect it all, and causes styling issues with some specific mermaid charts.

The issues can be reproduced at https://staging.gitlab.com/djadmin/test-mermaid-charts/-/issues/3

Screenshots or screen recordings

before after
image image
image image

Checked for any regression

screencapture-gdk-test-3000-flightjs-Flight-issues-38-2022-01-13-11_07_19

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