Merge pull request #907 from 1AhmedYasser/Cap-canvas-text-node-height-with-wrapped-preview

Cap canvas text node height with wrapped preview

Author: ffrose

GUI/src/components/Flow/NodeTypes/StepNode.tsx

@@ -67,15 +67,17 @@ const StepNode: FC<StepNodeProps> = ({ data }) => {
       </p>
       {data.stepType === StepType.Textfield && (
         <div
-          style={{ ...boldText, whiteSpace: 'pre-wrap' }}
+          className="step-node-content"
+          style={{ ...boldText }}
           dangerouslySetInnerHTML={createMarkup(data.message ?? '')}
-        ></div>
+        />
       )}
       {data.stepType === StepType.MultiChoiceQuestion && (
         <div
-          style={{ ...boldText, whiteSpace: 'pre-wrap' }}
+          className="step-node-content"
+          style={{ ...boldText }}
           dangerouslySetInnerHTML={createMarkup(data.multiChoiceQuestion?.question ?? '')}
-        ></div>
+        />
       )}
       {data.stepType === StepType.Auth && <p style={boldText}>&quot;{t('serviceFlow.popup.loginWithTARA')}&quot;</p>}
       {data.stepType === StepType.Input && (

GUI/src/pages/ServiceFlowPage.scss

@@ -54,8 +54,20 @@
     max-width: 350px;
     width: 100%;
     min-height: 65px;
+    max-height: 65px;
     align-content: center;
 
+    .step-node-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 318px;
+
+      p {
+        display: inline;
+      }
+    }
+
     &.selected {
       border: dashed 1px get-color(black-coral-1);