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

src/components/topbar/WorkflowTabs.vue

@@ -228,33 +228,29 @@ const scroll = (direction: number) => {
   scrollElement.scrollBy({ left: direction * 20 })
 }
 
+const ensureActiveTabVisible = async () => {
+  if (!selectedWorkflow.value) return
+
+  await nextTick()
+
+  const scrollPanelElement = scrollPanelRef.value?.$el as
+    | HTMLElement
+    | undefined
+  if (!scrollPanelElement) return
+
+  const activeTabElement = scrollPanelElement.querySelector(
+    '.p-togglebutton-checked'
+  ) as HTMLElement | null
+  if (!activeTabElement) return
+
+  activeTabElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
+
 // Scroll to active offscreen tab when opened
 watch(
   () => workflowStore.activeWorkflow,
-  async () => {
-    if (!selectedWorkflow.value) return
-
-    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 tabRect = activeTabElement.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
-
-    const offsetLeft = tabRect.left - containerRect.left
-    const offsetRight = tabRect.right - containerRect.right
-
-    if (offsetRight > 0) {
-      container.scrollBy({ left: offsetRight })
-    } else if (offsetLeft < 0) {
-      container.scrollBy({ left: offsetLeft })
-    }
+  () => {
+    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 }