From 91d8d04dc61f6f7dc67b1f9688d30084596493c7 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Fri, 10 Jan 2025 10:59:58 -0500
Subject: [PATCH] [Style] Reduce opacity on workflow tabs scrollbar (#2220)

---
 src/components/topbar/WorkflowTabs.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index c87034ffee..1035fd3dd0 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -6,6 +6,7 @@
         class: 'p-0 w-full',
         onwheel: handleWheel
       }"
+      pt:barX="h-1"
     >
       <SelectButton
         class="workflow-tabs bg-transparent"
@@ -198,4 +199,10 @@ const handleWheel = (event: WheelEvent) => {
 :deep(.p-togglebutton) .close-button {
   @apply invisible;
 }
+
+/* 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;
+}
 </style>