From 7ebb38ba849c0aa19a63ea99b8253a61b9d839e7 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 10:38:15 +0900
Subject: [PATCH 1/9] Basic tab switching

---
 src/components/topbar/TopMenubar.vue   |  2 ++
 src/components/topbar/WorkflowTabs.vue | 35 +++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index a3206e3ec..f0396a1d2 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -9,12 +9,14 @@
           rootList: 'gap-0'
         }"
       />
+      <WorkflowTabs />
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
 import Menubar from 'primevue/menubar'
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useCoreMenuItemStore } from '@/stores/coreMenuItemStore'
 import { computed } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index ef4b86902..14f1353ae 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,16 +1,45 @@
 <template>
   <div class="workflow-tabs">
     <SelectButton
-      v-model="workflowStore.activeWorkflow"
-      :options="workflowStore.openWorkflows"
-      aria-labelledby="basic"
+      :modelValue="selectedWorkflow"
+      @update:modelValue="onWorkflowChange"
+      :options="options"
+      optionLabel="label"
+      dataKey="value"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ComfyWorkflow } from '@/scripts/workflows'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import SelectButton from 'primevue/selectbutton'
+import { computed } from 'vue'
 
 const workflowStore = useWorkflowStore()
+interface WorkflowOption {
+  label: string
+  value: string
+}
+
+const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
+  label: workflow.name,
+  value: workflow.key
+})
+
+const optionToWorkflow = (option: WorkflowOption): ComfyWorkflow =>
+  workflowStore.workflowLookup[option.value]
+
+const options = computed<WorkflowOption[]>(() =>
+  workflowStore.openWorkflows.map(workflowToOption)
+)
+const selectedWorkflow = computed<WorkflowOption | null>(() =>
+  workflowStore.activeWorkflow
+    ? workflowToOption(workflowStore.activeWorkflow as ComfyWorkflow)
+    : null
+)
+const onWorkflowChange = (option: WorkflowOption) => {
+  const workflow = optionToWorkflow(option)
+  workflow.load()
+}
 </script>

From feb017071d1b3fa306fc4340221d18d8ac36695a Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 11:14:55 +0900
Subject: [PATCH 2/9] Closing tabs

---
 src/components/topbar/TopMenubar.vue   |  2 ++
 src/components/topbar/WorkflowTabs.vue | 32 +++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index f0396a1d2..8c84b712c 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -9,6 +9,7 @@
           rootList: 'gap-0'
         }"
       />
+      <Divider layout="vertical" class="mx-2" />
       <WorkflowTabs />
     </div>
   </teleport>
@@ -16,6 +17,7 @@
 
 <script setup lang="ts">
 import Menubar from 'primevue/menubar'
+import Divider from 'primevue/divider'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useCoreMenuItemStore } from '@/stores/coreMenuItemStore'
 import { computed } from 'vue'
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 14f1353ae..26723c199 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,19 +1,35 @@
 <template>
   <div class="workflow-tabs">
     <SelectButton
+      class="bg-transparent"
       :modelValue="selectedWorkflow"
       @update:modelValue="onWorkflowChange"
       :options="options"
       optionLabel="label"
       dataKey="value"
-    />
+    >
+      <template #option="{ option }">
+        <span class="text-sm">{{ option.label }}</span>
+        <Button
+          class="p-0 w-auto"
+          :class="{ invisible: option.value !== selectedWorkflow?.value }"
+          icon="pi pi-times"
+          text
+          severity="secondary"
+          size="small"
+          @click.stop="onCloseWorkflow(option)"
+        />
+      </template>
+    </SelectButton>
   </div>
 </template>
 
 <script setup lang="ts">
+import { app } from '@/scripts/app'
 import { ComfyWorkflow } from '@/scripts/workflows'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import SelectButton from 'primevue/selectbutton'
+import Button from 'primevue/button'
 import { computed } from 'vue'
 
 const workflowStore = useWorkflowStore()
@@ -39,7 +55,21 @@ const selectedWorkflow = computed<WorkflowOption | null>(() =>
     : null
 )
 const onWorkflowChange = (option: WorkflowOption) => {
+  // Prevent unselecting the current workflow
+  if (!option) {
+    return
+  }
+  // Prevent reloading the current workflow
+  if (selectedWorkflow.value?.value === option.value) {
+    return
+  }
+
   const workflow = optionToWorkflow(option)
   workflow.load()
 }
+
+const onCloseWorkflow = (option: WorkflowOption) => {
+  const workflow = optionToWorkflow(option)
+  app.workflowManager.closeWorkflow(workflow)
+}
 </script>

From 6f9cff04e21c4a02a5706c217b9ddff3034c7fd3 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 11:36:08 +0900
Subject: [PATCH 3/9] Style buttons

---
 src/components/topbar/WorkflowTabs.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 26723c199..c4927123e 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -11,8 +11,7 @@
       <template #option="{ option }">
         <span class="text-sm">{{ option.label }}</span>
         <Button
-          class="p-0 w-auto"
-          :class="{ invisible: option.value !== selectedWorkflow?.value }"
+          class="close-button p-0 w-auto invisible"
           icon="pi pi-times"
           text
           severity="secondary"
@@ -73,3 +72,23 @@ const onCloseWorkflow = (option: WorkflowOption) => {
   app.workflowManager.closeWorkflow(workflow)
 }
 </script>
+
+<style scoped>
+:deep(.p-togglebutton::before) {
+  @apply hidden;
+}
+
+:deep(.p-togglebutton) {
+  @apply px-2 bg-transparent rounded-none;
+}
+
+:deep(.p-togglebutton.p-togglebutton-checked) {
+  @apply border-b-2;
+  border-bottom-color: var(--p-button-text-primary-color);
+}
+
+:deep(.p-togglebutton-checked) .close-button,
+:deep(.p-togglebutton:hover) .close-button {
+  @apply visible;
+}
+</style>

From baaced1f2dadcd741a418239fcfb307e04c192cd Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 12:01:25 +0900
Subject: [PATCH 4/9] wip

---
 src/components/topbar/WorkflowTabs.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index c4927123e..94f68b4cd 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="workflow-tabs">
     <SelectButton
-      class="bg-transparent"
+      class="select-button-group bg-transparent"
       :modelValue="selectedWorkflow"
       @update:modelValue="onWorkflowChange"
       :options="options"
@@ -9,7 +9,9 @@
       dataKey="value"
     >
       <template #option="{ option }">
-        <span class="text-sm">{{ option.label }}</span>
+        <span class="text-sm max-w-[150px] truncate inline-block">{{
+          option.label
+        }}</span>
         <Button
           class="close-button p-0 w-auto invisible"
           icon="pi pi-times"
@@ -74,6 +76,18 @@ const onCloseWorkflow = (option: WorkflowOption) => {
 </script>
 
 <style scoped>
+.select-button-group {
+  max-width: 70vw;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+.select-button-group::-webkit-scrollbar {
+  display: none; /* WebKit */
+}
+
 :deep(.p-togglebutton::before) {
   @apply hidden;
 }

From bf4fc0eed22d4e7d9bd70c0bbb7c712721199400 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 12:26:02 +0900
Subject: [PATCH 5/9] Fix scroll style

---
 src/components/topbar/WorkflowTabs.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 94f68b4cd..cbef179f9 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -77,15 +77,14 @@ const onCloseWorkflow = (option: WorkflowOption) => {
 
 <style scoped>
 .select-button-group {
+  /* TODO: Make this dynamic. Take rest of space after all tool buttons */
   max-width: 70vw;
   overflow-x: auto;
   overflow-y: hidden;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-}
 
-.select-button-group::-webkit-scrollbar {
-  display: none; /* WebKit */
+  /* Scrollbar styling */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
 }
 
 :deep(.p-togglebutton::before) {
@@ -93,7 +92,7 @@ const onCloseWorkflow = (option: WorkflowOption) => {
 }
 
 :deep(.p-togglebutton) {
-  @apply px-2 bg-transparent rounded-none;
+  @apply px-2 bg-transparent rounded-none flex-shrink-0;
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {

From 3c37cf4b80f7e812930bc5f46e810717ecd260df Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 13:59:08 +0900
Subject: [PATCH 6/9] Add setting

---
 src/components/sidebar/tabs/WorkflowsSidebarTab.vue | 11 ++++++++++-
 src/components/topbar/TopMenubar.vue                |  5 ++++-
 src/stores/coreSettings.ts                          |  7 +++++++
 src/types/apiTypes.ts                               |  1 +
 src/views/GraphView.vue                             |  5 +++++
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index aa411735c..efffee1a2 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -38,7 +38,10 @@
         :placeholder="$t('searchWorkflows') + '...'"
       />
       <div class="comfyui-workflows-panel" v-if="!isSearching">
-        <div class="comfyui-workflows-open">
+        <div
+          class="comfyui-workflows-open"
+          v-if="workflowTabsPosition === 'Sidebar'"
+        >
           <TextDivider text="Open" type="dashed" class="ml-2" />
           <TreeExplorer
             :roots="renderTreeNode(workflowStore.openWorkflowsTree).children"
@@ -120,6 +123,12 @@ import { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { ComfyWorkflow } from '@/scripts/workflows'
 import { useI18n } from 'vue-i18n'
 import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useSettingStore } from '@/stores/settingStore'
+
+const settingStore = useSettingStore()
+const workflowTabsPosition = computed(() =>
+  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
+)
 
 const searchQuery = ref('')
 const isSearching = computed(() => searchQuery.value.length > 0)
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 8c84b712c..5ec206922 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -10,7 +10,7 @@
         }"
       />
       <Divider layout="vertical" class="mx-2" />
-      <WorkflowTabs />
+      <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" />
     </div>
   </teleport>
 </template>
@@ -24,6 +24,9 @@ import { computed } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
 
 const settingStore = useSettingStore()
+const workflowTabsPosition = computed(() =>
+  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
+)
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index 4f27c0aca..da0fa30d9 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -380,5 +380,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     experimental: true,
     type: 'combo',
     options: ['Disabled', 'Floating']
+  },
+  {
+    id: 'Comfy.Workflow.WorkflowTabsPosition',
+    name: 'Opened workflows position',
+    type: 'combo',
+    options: ['Sidebar', 'Topbar'],
+    defaultValue: 'Sidebar'
   }
 ]
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index aa064c42a..0cc3eaf64 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -500,6 +500,7 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
       'Comfy.Workflow.ModelDownload.AllowedSources': z.array(z.string()),
       'Comfy.Workflow.ModelDownload.AllowedSuffixes': z.array(z.string()),
+      'Comfy.Workflow.WorkflowTabsPosition': z.enum(['Sidebar', 'Topbar']),
       'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
       'Comfy.Window.UnloadConfirmation': z.boolean(),
       'Comfy.NodeBadge.NodeSourceBadgeMode': zNodeBadgeMode,
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index e6a22b0de..4ce9f48d2 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -135,6 +135,11 @@ const init = () => {
     id: 'workflows',
     icon: 'pi pi-folder-open',
     iconBadge: () => {
+      if (
+        settingStore.get('Comfy.Workflow.WorkflowTabsPosition') !== 'Sidebar'
+      ) {
+        return null
+      }
       const value = useWorkflowStore().openWorkflows.length.toString()
       return value === '0' ? null : value
     },

From f0c80e8b05227fc96294c934e6aade9829c6cd6c Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 14:33:14 +0900
Subject: [PATCH 7/9] Add playwright test

---
 browser_tests/ComfyPage.ts | 14 ++++++++++++++
 browser_tests/menu.spec.ts | 20 ++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 943abdf8e..99351dd15 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -212,6 +212,16 @@ class WorkflowsSidebarTab extends SidebarTab {
   }
 }
 
+class Topbar {
+  constructor(public readonly page: Page) {}
+
+  async getTabNames(): Promise<string[]> {
+    return await this.page
+      .locator('.workflow-tabs .p-togglebutton .p-togglebutton-content')
+      .allInnerTexts()
+  }
+}
+
 class ComfyMenu {
   public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
@@ -248,6 +258,10 @@ class ComfyMenu {
     return new WorkflowsSidebarTab(this.page)
   }
 
+  get topbar() {
+    return new Topbar(this.page)
+  }
+
   async toggleTheme() {
     await this.themeToggleButton.click()
     await this.page.evaluate(() => {
diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index e1f48422d..6020d8aef 100644
--- a/browser_tests/menu.spec.ts
+++ b/browser_tests/menu.spec.ts
@@ -381,6 +381,11 @@ test.describe('Menu', () => {
 
   test.describe('Workflows sidebar', () => {
     test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+
       // Open the sidebar
       const tab = comfyPage.menu.workflowsTab
       await tab.open()
@@ -434,6 +439,21 @@ test.describe('Menu', () => {
     })
   })
 
+  test.describe('Workflows topbar tabs', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+    })
+
+    test('Can show opened workflows', async ({ comfyPage }) => {
+      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
+        'Unsaved Workflow'
+      ])
+    })
+  })
+
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
     const [defaultSpeed, maxSpeed] = [1.1, 2.5]
     expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(

From 6cd27bbefe9f5b1ab9ff433a9c7041c82ffaded6 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 14:47:23 +0900
Subject: [PATCH 8/9] Add unsaved status

---
 src/components/topbar/WorkflowTabs.vue | 47 ++++++++++++++++++++------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index cbef179f9..e7143575d 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -12,14 +12,17 @@
         <span class="text-sm max-w-[150px] truncate inline-block">{{
           option.label
         }}</span>
-        <Button
-          class="close-button p-0 w-auto invisible"
-          icon="pi pi-times"
-          text
-          severity="secondary"
-          size="small"
-          @click.stop="onCloseWorkflow(option)"
-        />
+        <div class="relative">
+          <span class="status-indicator" v-if="option.unsaved">•</span>
+          <Button
+            class="close-button p-0 w-auto"
+            icon="pi pi-times"
+            text
+            severity="secondary"
+            size="small"
+            @click.stop="onCloseWorkflow(option)"
+          />
+        </div>
       </template>
     </SelectButton>
   </div>
@@ -37,11 +40,13 @@ const workflowStore = useWorkflowStore()
 interface WorkflowOption {
   label: string
   value: string
+  unsaved: boolean
 }
 
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   label: workflow.name,
-  value: workflow.key
+  value: workflow.key,
+  unsaved: workflow.unsaved
 })
 
 const optionToWorkflow = (option: WorkflowOption): ComfyWorkflow =>
@@ -73,6 +78,12 @@ const onCloseWorkflow = (option: WorkflowOption) => {
   const workflow = optionToWorkflow(option)
   app.workflowManager.closeWorkflow(workflow)
 }
+
+// Add this new function to check if a workflow is unsaved
+const isWorkflowUnsaved = (option: WorkflowOption): boolean => {
+  const workflow = optionToWorkflow(option)
+  return workflow.unsaved
+}
 </script>
 
 <style scoped>
@@ -92,7 +103,7 @@ const onCloseWorkflow = (option: WorkflowOption) => {
 }
 
 :deep(.p-togglebutton) {
-  @apply px-2 bg-transparent rounded-none flex-shrink-0;
+  @apply px-2 bg-transparent rounded-none flex-shrink-0 relative;
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {
@@ -104,4 +115,20 @@ const onCloseWorkflow = (option: WorkflowOption) => {
 :deep(.p-togglebutton:hover) .close-button {
   @apply visible;
 }
+
+.status-indicator {
+  @apply absolute font-bold;
+  font-size: 1.5rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:deep(.p-togglebutton:hover) .status-indicator {
+  @apply hidden;
+}
+
+:deep(.p-togglebutton) .close-button {
+  @apply invisible;
+}
 </style>

From 4328967b7f2b748bf0067f2a33848f88b5963f33 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 24 Sep 2024 15:19:37 +0900
Subject: [PATCH 9/9] nit

---
 browser_tests/ComfyPage.ts             | 2 +-
 src/components/topbar/WorkflowTabs.vue | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 99351dd15..c4cb513fd 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -217,7 +217,7 @@ class Topbar {
 
   async getTabNames(): Promise<string[]> {
     return await this.page
-      .locator('.workflow-tabs .p-togglebutton .p-togglebutton-content')
+      .locator('.workflow-tabs .workflow-label')
       .allInnerTexts()
   }
 }
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index e7143575d..f92474544 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -9,9 +9,10 @@
       dataKey="value"
     >
       <template #option="{ option }">
-        <span class="text-sm max-w-[150px] truncate inline-block">{{
-          option.label
-        }}</span>
+        <span
+          class="workflow-label text-sm max-w-[150px] truncate inline-block"
+          >{{ option.label }}</span
+        >
         <div class="relative">
           <span class="status-indicator" v-if="option.unsaved">•</span>
           <Button