From 24957b5592459ec7a4009bfaee82f35883f4bddb Mon Sep 17 00:00:00 2001
From: Devosend <devosend@gmail.com>
Date: Fri, 9 Sep 2022 10:35:23 +0800
Subject: [PATCH] [Fix][UI] Fix workflow name overlaps bug (#11862)

---
 .../src/common/column-width-config.ts         |  3 ++
 .../projects/workflow/definition/use-table.ts | 41 ++++++++++++-------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/dolphinscheduler-ui/src/common/column-width-config.ts b/dolphinscheduler-ui/src/common/column-width-config.ts
index 663195162e..7df8dbc321 100644
--- a/dolphinscheduler-ui/src/common/column-width-config.ts
+++ b/dolphinscheduler-ui/src/common/column-width-config.ts
@@ -94,6 +94,9 @@ export const COLUMN_WIDTH_CONFIG = {
   },
   tag: {
     width: 160
+  },
+  copy: {
+    width: 50
   }
 }
 
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts
index 0587646621..cf8683816c 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts
@@ -83,7 +83,8 @@ export function useTable() {
         title: t('project.workflow.workflow_name'),
         key: 'name',
         className: 'workflow-name',
-        width: 200,
+        ...COLUMN_WIDTH_CONFIG['name'],
+        titleColSpan: 2,
         render: (row) =>
           h(
             NSpace,
@@ -93,7 +94,7 @@ export function useTable() {
               class: styles['workflow-name']
             },
             {
-              default: () => [
+              default: () =>
                 h(
                   ButtonLink,
                   {
@@ -104,24 +105,34 @@ export function useTable() {
                       })
                   },
                   {
-                    default: () => h(NEllipsis, null, () => row.name)
+                    default: () =>
+                      h(
+                        NEllipsis,
+                        COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                        () => row.name
+                      )
                   }
-                ),
-                h(
-                  NButton,
-                  {
-                    quaternary: true,
-                    circle: true,
-                    type: 'info',
-                    size: 'tiny',
-                    onClick: () => void copy(row.name)
-                  },
-                  { icon: () => h(NIcon, { size: 16 }, () => h(CopyOutlined)) }
                 )
-              ]
             }
           )
       },
+      {
+        title: 'Copy',
+        key: 'copy',
+        ...COLUMN_WIDTH_CONFIG['copy'],
+        render: (row) =>
+          h(
+            NButton,
+            {
+              quaternary: true,
+              circle: true,
+              type: 'info',
+              size: 'tiny',
+              onClick: () => void copy(row.name)
+            },
+            { icon: () => h(NIcon, { size: 16 }, () => h(CopyOutlined)) }
+          )
+      },
       {
         title: t('project.workflow.status'),
         key: 'releaseState',