From e6e3950f7982515854c68b839d70c3e9478f5a6d Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Fri, 29 Aug 2025 11:38:41 -0400
Subject: [PATCH 1/2] FOUR-26094: UI: When I click the stage name to edit it,
 the elements are misaligned.

---
 .../modeler/components/inspector/StageList.vue     | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/resources/js/processes/modeler/components/inspector/StageList.vue b/resources/js/processes/modeler/components/inspector/StageList.vue
index 6eb3f34d4c..13c13eaa63 100644
--- a/resources/js/processes/modeler/components/inspector/StageList.vue
+++ b/resources/js/processes/modeler/components/inspector/StageList.vue
@@ -35,12 +35,7 @@
           :placeholder="$t('Enter name')"
           maxlength="200"
           @keyup.enter="onKeyupEnter"
-          @input="onInput"
-          @paste="onPaste"
-        >
-        <small class="tw-text-gray-500 tw-text-xs">
-          {{ newStage.length }}/200 {{ $t('characters') }}
-        </small>
+          @paste="onPaste" />
       </div>
     </div>
     <div class="tw-flex tw-justify-end tw-mt-2">
@@ -85,13 +80,6 @@ const totalStages = computed(() => stages.value.length);
 const disableButton = computed(() => totalStages.value >= 8);
 const stateNewStage = ref(true);
 
-const onInput = (event) => {
-  // Limit to 200 characters
-  if (newStage.value.length > 200) {
-    newStage.value = newStage.value.substring(0, 200);
-  }
-};
-
 const onPaste = (event) => {
   // Handle paste event to ensure proper character counting
   setTimeout(() => {

From 582326de9ccd073e0bd91d819104d99034753537 Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Fri, 29 Aug 2025 12:15:06 -0400
Subject: [PATCH 2/2] FOUR-26094: UI: When I click the stage name to edit it,
 the elements are misaligned.

---
 .../modeler/components/inspector/StageList.vue        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/processes/modeler/components/inspector/StageList.vue b/resources/js/processes/modeler/components/inspector/StageList.vue
index 13c13eaa63..3eefcb9b47 100644
--- a/resources/js/processes/modeler/components/inspector/StageList.vue
+++ b/resources/js/processes/modeler/components/inspector/StageList.vue
@@ -35,7 +35,9 @@
           :placeholder="$t('Enter name')"
           maxlength="200"
           @keyup.enter="onKeyupEnter"
-          @paste="onPaste" />
+          @input="onInput"
+          @paste="onPaste"
+        >
       </div>
     </div>
     <div class="tw-flex tw-justify-end tw-mt-2">
@@ -80,6 +82,13 @@ const totalStages = computed(() => stages.value.length);
 const disableButton = computed(() => totalStages.value >= 8);
 const stateNewStage = ref(true);
 
+const onInput = (event) => {
+  // Limit to 200 characters
+  if (newStage.value.length > 200) {
+    newStage.value = newStage.value.substring(0, 200);
+  }
+};
+
 const onPaste = (event) => {
   // Handle paste event to ensure proper character counting
   setTimeout(() => {