make step header sticky, disabled when tool form is shown to avoid stacking

Author: ahmedhamidawan

client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue

@@ -128,6 +128,22 @@ const initialPosition = computed(() => ({
 
 const activeStep = computed(() => (activeNodeId.value !== null ? props.workflow.steps[activeNodeId.value] : undefined));
 
+const activeCardHeaderClass = computed<Record<string, boolean>>(() => {
+    const baseClasses = {
+        "invocation-step-header": !showToolForm.value,
+        "sticky-top": !showToolForm.value,
+        "d-flex": true,
+        "justify-content-between": true,
+        "align-items-center": true,
+        "px-3": true,
+        "py-1": true,
+    };
+
+    const stepHeaderClass = activeNodeId.value !== null ? steps.value[activeNodeId.value]?.headerClass : undefined;
+
+    return stepHeaderClass ? { ...baseClasses, ...stepHeaderClass } : baseClasses;
+});
+
 /**
  * The job ID of the active step if it is not a workflow input and has a job associated with it, otherwise undefined.
  * This is used to determine whether to show the tool form for the active step.
@@ -253,9 +269,7 @@ function stepClicked(nodeId: number | null) {
                 </div>
             </div>
             <BCard v-if="activeNodeId !== null && activeStep" ref="stepCard" class="invocation-step-card mt-2" no-body>
-                <BCardHeader
-                    class="d-flex justify-content-between align-items-center px-3 py-1"
-                    :class="activeNodeId !== null ? steps[activeNodeId]?.headerClass : ''">
+                <BCardHeader :class="activeCardHeaderClass">
                     <WorkflowInvocationStepHeader
                         class="w-100 pr-2"
                         :workflow-step="activeStep"
@@ -366,15 +380,19 @@ function stepClicked(nodeId: number | null) {
     min-height: 500px;
 }
 
-// Keep sticky header but let multiselect dropdowns render above it.
+.invocation-step-header {
+    z-index: 2;
+}
+
+// Prevent sticky header from covering multiselect dropdowns.
 .invocation-tool-form {
     &:deep(.tool-header),
     &:deep(.ui-form-header-underlay) {
         z-index: 2 !important;
     }
 
     &:deep(.multiselect__content-wrapper) {
-        z-index: 3;
+        z-index: 1000;
     }
 }
 </style>