From 3f9c0bb3920a883ba81c24b3779480891f036936 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 31 Jul 2024 13:26:09 -0500
Subject: [PATCH] decrease step header size in `InvocationGraph` to "sm"

add gap between step header buttons
---
 .../Workflow/Invocation/Graph/InvocationGraph.vue    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index ce65ef1a6e12..a85edfc288e3 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -211,7 +211,7 @@ function scrollStepToView() {
                 <BCardHeader
                     class="d-flex justify-content-between align-items-center"
                     :class="activeNodeId ? steps[activeNodeId]?.headerClass : ''">
-                    <Heading inline size="md" class="w-100 mr-2">
+                    <Heading inline size="sm" class="w-100 mr-2">
                         <WorkflowInvocationStepHeader
                             v-if="activeNodeId !== null"
                             class="w-100"
@@ -220,11 +220,15 @@ function scrollStepToView() {
                             :invocation-step="props.invocation.steps[activeNodeId]" />
                         <span v-else>No Step Selected</span>
                     </Heading>
-                    <div class="d-flex">
-                        <BButton v-if="activeNodeId !== null" title="Scroll to Step" @click="scrollStepToView()">
+                    <div class="d-flex flex-gapx-1">
+                        <BButton
+                            v-if="activeNodeId !== null"
+                            title="Scroll to Step"
+                            size="sm"
+                            @click="scrollStepToView()">
                             <FontAwesomeIcon :icon="faArrowDown" />
                         </BButton>
-                        <BButton v-if="activeNodeId !== null" title="Hide Step" @click="activeNodeId = null">
+                        <BButton v-if="activeNodeId !== null" title="Hide Step" size="sm" @click="activeNodeId = null">
                             <FontAwesomeIcon :icon="faTimes" />
                         </BButton>
                     </div>