From e663858c9d640e1c14505693cd09a74620a9c79c Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Fri, 29 Aug 2025 12:50:58 +0200
Subject: [PATCH] fix(editor): Set workflow name width at different breakpoints
 (#18956)

---
 .../src/components/MainHeader/WorkflowDetails.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 85baf2623e..76e3df0c52 100644
--- a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -62,8 +62,13 @@ import { computed, ref, useCssModule, useTemplateRef, watch } from 'vue';
 import { I18nT } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-const WORKFLOW_NAME_MAX_WIDTH_SMALL_SCREENS = 150;
-const WORKFLOW_NAME_MAX_WIDTH_WIDE_SCREENS = 200;
+const WORKFLOW_NAME_BP_TO_WIDTH: { [key: string]: number } = {
+	XS: 150,
+	SM: 200,
+	MD: 250,
+	LG: 500,
+	XL: 1000,
+};
 
 const props = defineProps<{
 	readOnly?: boolean;
@@ -736,11 +741,7 @@ const onBreadcrumbsItemSelected = (item: PathItem) => {
 							class="name"
 							:model-value="name"
 							:max-length="MAX_WORKFLOW_NAME_LENGTH"
-							:max-width="
-								['XS', 'SM'].includes(bp)
-									? WORKFLOW_NAME_MAX_WIDTH_SMALL_SCREENS
-									: WORKFLOW_NAME_MAX_WIDTH_WIDE_SCREENS
-							"
+							:max-width="WORKFLOW_NAME_BP_TO_WIDTH[bp]"
 							:read-only="readOnly || isArchived || (!isNewWorkflow && !workflowPermissions.update)"
 							:disabled="readOnly || isArchived || (!isNewWorkflow && !workflowPermissions.update)"
 							@update:model-value="onNameSubmit"