From 3fc5de6a126d3485d16a6a541685071219133543 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Tue, 3 Feb 2026 23:42:51 +0200
Subject: [PATCH] chore(895): Added Fixed Text Width and capped longed text

---
 GUI/src/components/Flow/NodeTypes/StepNode.tsx | 10 ++++++----
 GUI/src/pages/ServiceFlowPage.scss             | 12 ++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/GUI/src/components/Flow/NodeTypes/StepNode.tsx b/GUI/src/components/Flow/NodeTypes/StepNode.tsx
index fb8281ecd..e33b8407f 100644
--- a/GUI/src/components/Flow/NodeTypes/StepNode.tsx
+++ b/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 && (
diff --git a/GUI/src/pages/ServiceFlowPage.scss b/GUI/src/pages/ServiceFlowPage.scss
index bb0c0b119..e96501732 100644
--- a/GUI/src/pages/ServiceFlowPage.scss
+++ b/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);