Use scrollIntoView to keep active workflow tab visible (#6077)

> "The watcher that should keep the active workflow tab visible compares
the tab’s bounds against the scroll panel’s content element, whose
rectangle spans the entire scroll width instead of the visible viewport.
As a result, when the active tab starts off-screen, the computed offsets
stay ≤ 0 and no corrective scroll occurs, so the selected tab remains
hidden."

fixes #6057

------
https://chatgpt.com/codex/tasks/task_e_68efe2b5b4a08330940a20552c1db339

Author: benceruleanlu

src/components/topbar/WorkflowTabs.vue

@@ -228,33 +228,29 @@ const scroll = (direction: number) => {
   scrollElement.scrollBy({ left: direction * 20 })
 }
 
-// Scroll to active offscreen tab when opened
-watch(
-  () => workflowStore.activeWorkflow,
-  async () => {
-    if (!selectedWorkflow.value) return
+const ensureActiveTabVisible = async () => {
+  if (!selectedWorkflow.value) return
 
-    await nextTick()
+  await nextTick()
 
-    const activeTabElement = document.querySelector('.p-togglebutton-checked')
-    if (!activeTabElement || !scrollPanelRef.value) return
-
-    const container = scrollPanelRef.value.$el.querySelector(
-      '.p-scrollpanel-content'
-    )
-    if (!container) return
+  const scrollPanelElement = scrollPanelRef.value?.$el as
+    | HTMLElement
+    | undefined
+  if (!scrollPanelElement) return
 
-    const tabRect = activeTabElement.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
+  const activeTabElement = scrollPanelElement.querySelector(
+    '.p-togglebutton-checked'
+  ) as HTMLElement | null
+  if (!activeTabElement) return
 
-    const offsetLeft = tabRect.left - containerRect.left
-    const offsetRight = tabRect.right - containerRect.right
+  activeTabElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
 
-    if (offsetRight > 0) {
-      container.scrollBy({ left: offsetRight })
-    } else if (offsetLeft < 0) {
-      container.scrollBy({ left: offsetLeft })
-    }
+// Scroll to active offscreen tab when opened
+watch(
+  () => workflowStore.activeWorkflow,
+  () => {
+    void ensureActiveTabVisible()
   },
   { immediate: true }
 )
@@ -285,6 +281,7 @@ watch(scrollContent, (value) => {
       void nextTick(() => {
         // Force a new check after arrows are updated
         scrollState.measure()
+        void ensureActiveTabVisible()
       })
     },
     { immediate: true }