[Style] Visual improvements to WorkflowTabs (#2232)

Co-authored-by: Benjamin Lu <templu1107@proton.me>

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'

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>