FA icons cropped when diagram is generated from a GET edit variable

[jpadfield]

Describe the bug When a flow diagram is passed to the Live Editor in the form of a GET variable a node containing FA icons can be rendered too small for the included icons so they can be cropped or obscured.

To Reproduce Link to Live Editor: Open the editor with this LINK

The node with the FA icons is too narrow and the right side of the icons are cropped: Edit the displayed code (even just add a space) Then hit refresh

The model updates with the correct amount of space for the icons. If the edits to the code are removed the icons are still displayed correctly - so the bug is something todo with how the data is processed from the GET variable

It is also shown if you use the "Copy Markdown" option the results, even after the icons are correctly rendered in the editor, will display the cropped version of the icon.

For example:

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chrome
• Version 104.0.5112.101 (Official Build) (64-bit)

Additional context

Simply copy and pasting the code into the editor or just writing it from scratch seems to work fine:

graph LR
classDef object stroke:#2C5D98,fill:#2C5D98,color:white,rx:5px,ry:5px;
classDef literal stroke:black,fill:#f0f0e0,color:black,rx:2px,ry:2px,max-width:100px;


O0("FontAwesome 5 Icons")
class O0 object;

O1("far:fa-user-circle far:fa-heart fab:fa-creative-commons fas:fa-code far:fa-user-circle far:fa-heart fab:fa-creative-commons fas:fa-code")
class O1 literal;
click O0 "https://fontawesome.com/v5/icons/" "Link to: https://fontawesome.com/v5 ..."; 
O0 -- for example -->O1["far:fa-user-circle far:fa-heart fab:fa-creative-commons<br/>fas:fa-code far:fa-user-circle far:fa-heart<br/>fab:fa-creative-commons fas:fa-code"]
;

The original link tot he live editor was generated via HERE