From fc09951b3e15caa61fea03c5a2d2ad5a39c93178 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Sun, 12 Jan 2025 13:41:55 -0500
Subject: [PATCH] [Style] Visual improvements to WorkflowTabs (#2232)

Co-authored-by: Benjamin Lu <templu1107@proton.me>
---
 src/components/topbar/TopMenubar.vue   |  2 --
 src/components/topbar/WorkflowTabs.vue | 30 ++++++++++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 5d5ef2eae..f039c7e93 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -8,7 +8,6 @@
     >
       <h1 class="comfyui-logo mx-2 app-drag">ComfyUI</h1>
       <CommandMenubar />
-      <Divider layout="vertical" class="mx-2" />
       <div class="flex-grow min-w-0 app-drag h-full">
         <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" />
       </div>
@@ -42,7 +41,6 @@
 <script setup lang="ts">
 import { useEventBus } from '@vueuse/core'
 import Button from 'primevue/button'
-import Divider from 'primevue/divider'
 import { computed, onMounted, provide, ref } from 'vue'
 
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index d7300b6e9..741b14735 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="workflow-tabs-container flex flex-row max-w-full">
+  <div class="workflow-tabs-container flex flex-row max-w-full h-full">
     <ScrollPanel
       class="overflow-hidden no-drag"
       :pt:content="{
@@ -178,21 +178,31 @@ const handleWheel = (event: WheelEvent) => {
 </script>
 
 <style scoped>
+:deep(.p-togglebutton) {
+  @apply p-0 bg-transparent rounded-none flex-shrink-0 relative border-0 border-r border-solid;
+  border-right-color: var(--border-color);
+}
+
 :deep(.p-togglebutton::before) {
   @apply hidden;
 }
 
-:deep(.p-togglebutton) {
-  @apply p-0 bg-transparent rounded-none flex-shrink-0 relative;
+:deep(.p-togglebutton:first-child) {
+  @apply border-l border-solid;
+  border-left-color: var(--border-color);
+}
+
+:deep(.p-togglebutton:not(:first-child)) {
+  @apply border-l-0;
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {
-  border-bottom-width: 1px;
+  @apply border-b border-solid h-full;
   border-bottom-color: var(--p-button-text-primary-color);
 }
 
 :deep(.p-togglebutton:not(.p-togglebutton-checked)) {
-  opacity: 0.75;
+  @apply opacity-75;
 }
 
 :deep(.p-togglebutton-checked) .close-button,
@@ -208,9 +218,17 @@ const handleWheel = (event: WheelEvent) => {
   @apply invisible;
 }
 
+:deep(.p-scrollpanel-content) {
+  @apply h-full;
+}
+
 /* Scrollbar half opacity to avoid blocking the active tab bottom border */
 :deep(.p-scrollpanel:hover .p-scrollpanel-bar),
 :deep(.p-scrollpanel:active .p-scrollpanel-bar) {
-  opacity: 0.5;
+  @apply opacity-50;
+}
+
+:deep(.p-selectbutton) {
+  @apply rounded-none h-full;
 }
 </style>