Fix bug where long comments on collapsed frames broke port alignment

dist/preview release/what's new.md

@@ -42,6 +42,7 @@
 - Updated which node ports are shown on frames by default so that only node ports connected to outside nodes are by default exposed on the frame ([belfortk](https://github.com/belfortk))
 - Added a modulo block ([ageneau](https://github.com/ageneau))
 - Fix bug where frame port labels would be the names of incorrect nodes ([belfortk](https://github.com/belfortk))
+- Fix bug where long comments on collapsed frames broke port alignment ([belfortk](https://github.com/belfortk))
 
 ### Inspector
 

nodeEditor/src/diagram/graphCanvas.scss

@@ -137,6 +137,14 @@
                         display: none;
                     }
                 }
+
+                .frame-comments.has-comments{
+                    .frame-comment-span{
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
             }
 
             .frame-box-border {                

nodeEditor/src/diagram/graphFrame.ts

@@ -383,7 +383,7 @@ export class GraphFrame {
         }
 
         if (comments === "" || (comments && comments.length >= 0)) {
-            this._commentsElement.innerText = comments;
+            (this._commentsElement.children[0] as HTMLSpanElement).innerText = comments;
         }
         this.height = this._borderElement.offsetHeight;
         this._comments = comments;
@@ -548,6 +548,9 @@ export class GraphFrame {
         this._commentsElement.className = 'frame-comments';
         this._commentsElement.style.color = 'white';
         this._commentsElement.style.fontSize = '16px';
+        let commentSpan = document.createElement('span');
+        commentSpan.className = "frame-comment-span"
+        this._commentsElement.appendChild(commentSpan)
 
         this.element.appendChild(this._commentsElement);