From 1c4481c342c5b7f96eb298158ca8e8515c3c0d7d Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 7 Jan 2025 10:45:58 -0500
Subject: [PATCH] Horizontal scroll workflow tabs on overflow (#2188)

---
 src/components/topbar/TopMenubar.vue   |  5 +-
 src/components/topbar/WorkflowTabs.vue | 74 ++++++++++++++++----------
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 3b46fa63eb..3a0116bbd5 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -9,13 +9,14 @@
       <h1 class="comfyui-logo mx-2">ComfyUI</h1>
       <CommandMenubar />
       <Divider layout="vertical" class="mx-2" />
-      <div class="flex-grow">
+      <div class="flex-grow min-w-0">
         <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" />
       </div>
       <div class="comfyui-menu-right" ref="menuRight"></div>
       <Actionbar />
-      <BottomPanelToggleButton />
+      <BottomPanelToggleButton class="flex-shrink-0" />
       <Button
+        class="flex-shrink-0"
         icon="pi pi-bars"
         severity="secondary"
         text
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index c96d8fba10..5473f87984 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,36 +1,47 @@
 <template>
-  <SelectButton
-    class="workflow-tabs bg-transparent inline"
-    :class="props.class"
-    :modelValue="selectedWorkflow"
-    @update:modelValue="onWorkflowChange"
-    :options="options"
-    optionLabel="label"
-    dataKey="value"
-  >
-    <template #option="{ option }">
-      <WorkflowTab
-        @contextmenu="showContextMenu($event, option)"
-        @click.middle="onCloseWorkflow(option)"
-        :workflow-option="option"
-      />
-    </template>
-  </SelectButton>
-  <Button
-    v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
-    class="new-blank-workflow-button"
-    icon="pi pi-plus"
-    text
-    severity="secondary"
-    :aria-label="$t('sideToolbar.newBlankWorkflow')"
-    @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
-  />
-  <ContextMenu ref="menu" :model="contextMenuItems" />
+  <div class="workflow-tabs-container flex flex-row w-full">
+    <ScrollPanel
+      class="overflow-x-hidden"
+      :pt:content="{
+        class: 'p-0 w-full',
+        onwheel: handleWheel
+      }"
+    >
+      <SelectButton
+        class="workflow-tabs bg-transparent"
+        :class="props.class"
+        :modelValue="selectedWorkflow"
+        @update:modelValue="onWorkflowChange"
+        :options="options"
+        optionLabel="label"
+        dataKey="value"
+      >
+        <template #option="{ option }">
+          <WorkflowTab
+            @contextmenu="showContextMenu($event, option)"
+            @click.middle="onCloseWorkflow(option)"
+            :workflow-option="option"
+          />
+        </template>
+      </SelectButton>
+    </ScrollPanel>
+    <Button
+      v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
+      class="new-blank-workflow-button flex-shrink-0"
+      icon="pi pi-plus"
+      text
+      severity="secondary"
+      :aria-label="$t('sideToolbar.newBlankWorkflow')"
+      @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
+    />
+    <ContextMenu ref="menu" :model="contextMenuItems" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ContextMenu from 'primevue/contextmenu'
+import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -146,6 +157,15 @@ const contextMenuItems = computed(() => {
   ]
 })
 const commandStore = useCommandStore()
+
+// Horizontal scroll on wheel
+const handleWheel = (event: WheelEvent) => {
+  const scrollElement = event.currentTarget as HTMLElement
+  const scrollAmount = event.deltaX || event.deltaY
+  scrollElement.scroll({
+    left: scrollElement.scrollLeft + scrollAmount
+  })
+}
 </script>
 
 <style scoped>