Use inputs context when parsing workflows (#35590) (#35595)

Backport #35590 by @Zettat123

Depends on [gitea/act#143](https://gitea.com/gitea/act/pulls/143)

The [`inputs`
context](https://docs.github.com/en/actions/reference/workflows-and-actions/contexts#inputs-context)
is used when parsing workflows so that `run-name` like `run-name: Deploy
to ${{ inputs.deploy_target }}` can be parsed correctly.

Co-authored-by: Zettat123 <zettat123@gmail.com>

go.mod

@@ -295,7 +295,7 @@ replace github.com/jaytaylor/html2text => github.com/Necoro/html2text v0.0.0-202
 
 replace github.com/hashicorp/go-version => github.com/6543/go-version v1.3.1
 
-replace github.com/nektos/act => gitea.com/gitea/act v0.261.6
+replace github.com/nektos/act => gitea.com/gitea/act v0.261.7-0.20251003180512-ac6e4b751763
 
 // TODO: the only difference is in `PutObject`: the fork doesn't use `NewVerifyingReader(r, sha256.New(), oid, expectedSize)`, need to figure out why
 replace github.com/charmbracelet/git-lfs-transfer => gitea.com/gitea/git-lfs-transfer v0.2.0

go.sum

@@ -31,8 +31,8 @@ dario.cat/mergo v1.0.2/go.mod h1:E/hbnu0NxMFBjpMIE34DRGLWqDy0g5FuKDhCb31ngxA=
 dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU=
 filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
 filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
-gitea.com/gitea/act v0.261.6 h1:CjZwKOyejonNFDmsXOw3wGm5Vet573hHM6VMLsxtvPY=
-gitea.com/gitea/act v0.261.6/go.mod h1:Pg5C9kQY1CEA3QjthjhlrqOC/QOT5NyWNjOjRHw23Ok=
+gitea.com/gitea/act v0.261.7-0.20251003180512-ac6e4b751763 h1:ohdxegvslDEllZmRNDqpKun6L4Oq81jNdEDtGgHEV2c=
+gitea.com/gitea/act v0.261.7-0.20251003180512-ac6e4b751763/go.mod h1:Pg5C9kQY1CEA3QjthjhlrqOC/QOT5NyWNjOjRHw23Ok=
 gitea.com/gitea/git-lfs-transfer v0.2.0 h1:baHaNoBSRaeq/xKayEXwiDQtlIjps4Ac/Ll4KqLMB40=
 gitea.com/gitea/git-lfs-transfer v0.2.0/go.mod h1:UrXUCm3xLQkq15fu7qlXHUMlrhdlXHoi13KH2Dfiits=
 gitea.com/gitea/go-xsd-duration v0.0.0-20220703122237-02e73435a078 h1:BAFmdZpRW7zMQZQDClaCWobRj9uL1MR3MzpCVJvc5s4=

routers/web/devtest/mock_actions.go

@@ -6,6 +6,7 @@ package devtest
 import (
 	mathRand "math/rand/v2"
 	"net/http"
+	"slices"
 	"strconv"
 	"strings"
 	"time"
@@ -17,25 +18,29 @@ import (
 	"code.gitea.io/gitea/services/context"
 )
 
-func generateMockStepsLog(logCur actions.LogCursor) (stepsLog []*actions.ViewStepLog) {
-	mockedLogs := []string{
-		"::group::test group for: step={step}, cursor={cursor}",
-		"in group msg for: step={step}, cursor={cursor}",
-		"in group msg for: step={step}, cursor={cursor}",
-		"in group msg for: step={step}, cursor={cursor}",
-		"::endgroup::",
+type generateMockStepsLogOptions struct {
+	mockCountFirst   int
+	mockCountGeneral int
+	groupRepeat      int
+}
+
+func generateMockStepsLog(logCur actions.LogCursor, opts generateMockStepsLogOptions) (stepsLog []*actions.ViewStepLog) {
+	var mockedLogs []string
+	mockedLogs = append(mockedLogs, "::group::test group for: step={step}, cursor={cursor}")
+	mockedLogs = append(mockedLogs, slices.Repeat([]string{"in group msg for: step={step}, cursor={cursor}"}, opts.groupRepeat)...)
+	mockedLogs = append(mockedLogs, "::endgroup::")
+	mockedLogs = append(mockedLogs,
 		"message for: step={step}, cursor={cursor}",
 		"message for: step={step}, cursor={cursor}",
 		"##[group]test group for: step={step}, cursor={cursor}",
 		"in group msg for: step={step}, cursor={cursor}",
 		"##[endgroup]",
-	}
-	cur := logCur.Cursor // usually the cursor is the "file offset", but here we abuse it as "line number" to make the mock easier, intentionally
-	mockCount := util.Iif(logCur.Step == 0, 3, 1)
-	if logCur.Step == 1 && logCur.Cursor == 0 {
-		mockCount = 30 // for the first batch, return as many as possible to test the auto-expand and auto-scroll
-	}
-	for i := 0; i < mockCount; i++ {
+	)
+	// usually the cursor is the "file offset", but here we abuse it as "line number" to make the mock easier, intentionally
+	cur := logCur.Cursor
+	// for the first batch, return as many as possible to test the auto-expand and auto-scroll
+	mockCount := util.Iif(logCur.Cursor == 0, opts.mockCountFirst, opts.mockCountGeneral)
+	for range mockCount {
 		logStr := mockedLogs[int(cur)%len(mockedLogs)]
 		cur++
 		logStr = strings.ReplaceAll(logStr, "{step}", strconv.Itoa(logCur.Step))
@@ -127,21 +132,28 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Duration: "3h",
 	})
 
+	var mockLogOptions []generateMockStepsLogOptions
 	resp.State.CurrentJob.Steps = append(resp.State.CurrentJob.Steps, &actions.ViewJobStep{
 		Summary:  "step 0 (mock slow)",
 		Duration: time.Hour.String(),
 		Status:   actions_model.StatusRunning.String(),
 	})
+	mockLogOptions = append(mockLogOptions, generateMockStepsLogOptions{mockCountFirst: 30, mockCountGeneral: 1, groupRepeat: 3})
+
 	resp.State.CurrentJob.Steps = append(resp.State.CurrentJob.Steps, &actions.ViewJobStep{
 		Summary:  "step 1 (mock fast)",
 		Duration: time.Hour.String(),
 		Status:   actions_model.StatusRunning.String(),
 	})
+	mockLogOptions = append(mockLogOptions, generateMockStepsLogOptions{mockCountFirst: 30, mockCountGeneral: 3, groupRepeat: 20})
+
 	resp.State.CurrentJob.Steps = append(resp.State.CurrentJob.Steps, &actions.ViewJobStep{
 		Summary:  "step 2 (mock error)",
 		Duration: time.Hour.String(),
 		Status:   actions_model.StatusRunning.String(),
 	})
+	mockLogOptions = append(mockLogOptions, generateMockStepsLogOptions{mockCountFirst: 30, mockCountGeneral: 3, groupRepeat: 3})
+
 	if len(req.LogCursors) == 0 {
 		ctx.JSON(http.StatusOK, resp)
 		return
@@ -156,7 +168,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		}
 		doSlowResponse = doSlowResponse || logCur.Step == 0
 		doErrorResponse = doErrorResponse || logCur.Step == 2
-		resp.Logs.StepsLog = append(resp.Logs.StepsLog, generateMockStepsLog(logCur)...)
+		resp.Logs.StepsLog = append(resp.Logs.StepsLog, generateMockStepsLog(logCur, mockLogOptions[logCur.Step])...)
 	}
 	if doErrorResponse {
 		if mathRand.Float64() > 0.5 {

services/actions/workflow.go

@@ -26,6 +26,7 @@ import (
 
 	"github.com/nektos/act/pkg/jobparser"
 	"github.com/nektos/act/pkg/model"
+	"gopkg.in/yaml.v3"
 )
 
 func EnableOrDisableWorkflow(ctx *context.APIContext, workflowID string, isEnable bool) error {
@@ -136,9 +137,24 @@ func DispatchActionWorkflow(ctx reqctx.RequestContext, doer *user_model.User, re
 		return err
 	}
 
+	singleWorkflow := &jobparser.SingleWorkflow{}
+	if err := yaml.Unmarshal(content, singleWorkflow); err != nil {
+		return fmt.Errorf("failed to unmarshal workflow content: %w", err)
+	}
+	// get inputs from post
+	workflow := &model.Workflow{
+		RawOn: singleWorkflow.RawOn,
+	}
+	inputsWithDefaults := make(map[string]any)
+	if workflowDispatch := workflow.WorkflowDispatchConfig(); workflowDispatch != nil {
+		if err = processInputs(workflowDispatch, inputsWithDefaults); err != nil {
+			return err
+		}
+	}
+
 	giteaCtx := GenerateGiteaContext(run, nil)
 
-	workflows, err = jobparser.Parse(content, jobparser.WithGitContext(giteaCtx.ToGitHubContext()))
+	workflows, err = jobparser.Parse(content, jobparser.WithGitContext(giteaCtx.ToGitHubContext()), jobparser.WithInputs(inputsWithDefaults))
 	if err != nil {
 		return err
 	}
@@ -154,17 +170,6 @@ func DispatchActionWorkflow(ctx reqctx.RequestContext, doer *user_model.User, re
 		)
 	}
 
-	// get inputs from post
-	workflow := &model.Workflow{
-		RawOn: workflows[0].RawOn,
-	}
-	inputsWithDefaults := make(map[string]any)
-	if workflowDispatch := workflow.WorkflowDispatchConfig(); workflowDispatch != nil {
-		if err = processInputs(workflowDispatch, inputsWithDefaults); err != nil {
-			return err
-		}
-	}
-
 	// ctx.Req.PostForm -> WorkflowDispatchPayload.Inputs -> ActionRun.EventPayload -> runner: ghc.Event
 	// https://docs.github.com/en/actions/learn-github-actions/contexts#github-context
 	// https://docs.github.com/en/webhooks/webhook-events-and-payloads#workflow_dispatch

services/pull/temp_repo.go

@@ -139,7 +139,7 @@ func createTemporaryRepoForPR(ctx context.Context, pr *issues_model.PullRequest)
 		return nil, nil, fmt.Errorf("Unable to add base repository as origin [%s -> tmpBasePath]: %w\n%s\n%s", pr.BaseRepo.FullName(), err, prCtx.outbuf.String(), prCtx.errbuf.String())
 	}
 
-	if err := gitcmd.NewCommand("fetch", "origin").AddArguments(fetchArgs...).AddDashesAndList(pr.BaseBranch+":"+baseBranch, pr.BaseBranch+":original_"+baseBranch).
+	if err := gitcmd.NewCommand("fetch", "origin").AddArguments(fetchArgs...).AddDashesAndList(git.BranchPrefix+pr.BaseBranch+":"+git.BranchPrefix+baseBranch, git.BranchPrefix+pr.BaseBranch+":"+git.BranchPrefix+"original_"+baseBranch).
 		Run(ctx, prCtx.RunOpts()); err != nil {
 		log.Error("%-v Unable to fetch origin base branch [%s:%s -> base, original_base in %s]: %v:\n%s\n%s", pr, pr.BaseRepo.FullName(), pr.BaseBranch, tmpBasePath, err, prCtx.outbuf.String(), prCtx.errbuf.String())
 		cancel()

tests/integration/actions_inputs_test.go

@@ -0,0 +1,85 @@
+// Copyright 2025 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package integration
+
+import (
+	"fmt"
+	"net/http"
+	"net/url"
+	"testing"
+
+	actions_model "code.gitea.io/gitea/models/actions"
+	auth_model "code.gitea.io/gitea/models/auth"
+	repo_model "code.gitea.io/gitea/models/repo"
+	"code.gitea.io/gitea/models/unittest"
+	user_model "code.gitea.io/gitea/models/user"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestWorkflowWithInputsContext(t *testing.T) {
+	onGiteaRun(t, func(t *testing.T, u *url.URL) {
+		user2 := unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: 2})
+		session := loginUser(t, user2.Name)
+		token := getTokenForLoggedInUser(t, session, auth_model.AccessTokenScopeWriteRepository, auth_model.AccessTokenScopeWriteUser)
+
+		apiRepo := createActionsTestRepo(t, token, "actions-inputs-context", false)
+		repo := unittest.AssertExistsAndLoadBean(t, &repo_model.Repository{ID: apiRepo.ID})
+		httpContext := NewAPITestContext(t, user2.Name, repo.Name, auth_model.AccessTokenScopeWriteRepository)
+		defer doAPIDeleteRepository(httpContext)(t)
+
+		wRunner := newMockRunner()
+		wRunner.registerAsRepoRunner(t, user2.Name, repo.Name, "windows-runner", []string{"windows-runner"}, false)
+		lRunner := newMockRunner()
+		lRunner.registerAsRepoRunner(t, user2.Name, repo.Name, "linux-runner", []string{"linux-runner"}, false)
+
+		wf1TreePath := ".gitea/workflows/test-inputs-context.yml"
+		wf1FileContent := `name: Test Inputs Context
+on:
+  workflow_dispatch:
+    inputs:
+      os:
+        description: 'OS'
+        required: true
+        type: choice
+        options:
+        - linux
+        - windows
+
+run-name: Build APP on ${{ inputs.os }}
+
+jobs:
+  build:
+    runs-on: ${{ inputs.os }}-runner
+    steps:
+      - run: echo 'Start building APP'
+`
+
+		opts1 := getWorkflowCreateFileOptions(user2, repo.DefaultBranch, "create %s"+wf1TreePath, wf1FileContent)
+		createWorkflowFile(t, token, user2.Name, repo.Name, wf1TreePath, opts1)
+
+		// run the workflow with os=windows
+		urlStr := fmt.Sprintf("/%s/%s/actions/run?workflow=%s", user2.Name, repo.Name, "test-inputs-context.yml")
+		req := NewRequestWithValues(t, "POST", urlStr, map[string]string{
+			"_csrf": GetUserCSRFToken(t, session),
+			"ref":   "refs/heads/main",
+			"os":    "windows",
+		})
+		session.MakeRequest(t, req, http.StatusSeeOther)
+
+		// linux-runner cannot fetch the task
+		lRunner.fetchNoTask(t)
+
+		task := wRunner.fetchTask(t)
+		_, _, run := getTaskAndJobAndRunByTaskID(t, task.Id)
+		assert.Equal(t, "Build APP on windows", run.Title)
+	})
+}
+
+func getTaskAndJobAndRunByTaskID(t *testing.T, taskID int64) (*actions_model.ActionTask, *actions_model.ActionRunJob, *actions_model.ActionRun) {
+	actionTask := unittest.AssertExistsAndLoadBean(t, &actions_model.ActionTask{ID: taskID})
+	actionRunJob := unittest.AssertExistsAndLoadBean(t, &actions_model.ActionRunJob{ID: actionTask.JobID})
+	actionRun := unittest.AssertExistsAndLoadBean(t, &actions_model.ActionRun{ID: actionRunJob.RunID})
+	return actionTask, actionRunJob, actionRun
+}

tests/integration/actions_runner_test.go

@@ -93,7 +93,20 @@ func (r *mockRunner) registerAsRepoRunner(t *testing.T, ownerName, repoName, run
 }
 
 func (r *mockRunner) fetchTask(t *testing.T, timeout ...time.Duration) *runnerv1.Task {
-	fetchTimeout := 10 * time.Second
+	task := r.tryFetchTask(t, timeout...)
+	assert.NotNil(t, task, "failed to fetch a task")
+	return task
+}
+
+func (r *mockRunner) fetchNoTask(t *testing.T, timeout ...time.Duration) {
+	task := r.tryFetchTask(t, timeout...)
+	assert.Nil(t, task, "a task is fetched")
+}
+
+const defaultFetchTaskTimeout = 1 * time.Second
+
+func (r *mockRunner) tryFetchTask(t *testing.T, timeout ...time.Duration) *runnerv1.Task {
+	fetchTimeout := defaultFetchTaskTimeout
 	if len(timeout) > 0 {
 		fetchTimeout = timeout[0]
 	}
@@ -108,9 +121,9 @@ func (r *mockRunner) fetchTask(t *testing.T, timeout ...time.Duration) *runnerv1
 			task = resp.Msg.Task
 			break
 		}
-		time.Sleep(time.Second)
+		time.Sleep(200 * time.Millisecond)
 	}
-	assert.NotNil(t, task, "failed to fetch a task")
+
 	return task
 }
 

web_src/js/components/RepoActionView.vue

@@ -2,7 +2,7 @@
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
 import {defineComponent, type PropType} from 'vue';
-import {createElementFromAttrs, toggleElem} from '../utils/dom.ts';
+import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {renderAnsi} from '../render/ansi.ts';
 import {POST, DELETE} from '../modules/fetch.ts';
@@ -40,6 +40,12 @@ type Step = {
   status: RunStatus,
 }
 
+type JobStepState = {
+  cursor: string|null,
+  expanded: boolean,
+  manuallyCollapsed: boolean, // whether the user manually collapsed the step, used to avoid auto-expanding it again
+}
+
 function parseLineCommand(line: LogLine): LogLineCommand | null {
   for (const prefix of LogLinePrefixesGroup) {
     if (line.message.startsWith(prefix)) {
@@ -54,9 +60,10 @@ function parseLineCommand(line: LogLine): LogLineCommand | null {
   return null;
 }
 
-function isLogElementInViewport(el: Element): boolean {
+function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPortHeight: 0}): boolean {
   const rect = el.getBoundingClientRect();
-  return rect.top >= 0 && rect.bottom <= window.innerHeight; // only check height but not width
+  // only check whether bottom is in viewport, because the log element can be a log group which is usually tall
+  return 0 <= rect.bottom && rect.bottom <= window.innerHeight + extraViewPortHeight;
 }
 
 type LocaleStorageOptions = {
@@ -104,7 +111,7 @@ export default defineComponent({
       // internal state
       loadingAbortController: null as AbortController | null,
       intervalID: null as IntervalId | null,
-      currentJobStepsStates: [] as Array<Record<string, any>>,
+      currentJobStepsStates: [] as Array<JobStepState>,
       artifacts: [] as Array<Record<string, any>>,
       menuVisible: false,
       isFullScreen: false,
@@ -181,6 +188,19 @@ export default defineComponent({
     // load job data and then auto-reload periodically
     // need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener
     await this.loadJob();
+
+    // auto-scroll to the bottom of the log group when it is opened
+    // "toggle" event doesn't bubble, so we need to use 'click' event delegation to handle it
+    addDelegatedEventListener(this.elStepsContainer(), 'click', 'summary.job-log-group-summary', (el, _) => {
+      if (!this.optionAlwaysAutoScroll) return;
+      const elJobLogGroup = el.closest('details.job-log-group') as HTMLDetailsElement;
+      setTimeout(() => {
+        if (elJobLogGroup.open && !isLogElementInViewport(elJobLogGroup)) {
+          elJobLogGroup.scrollIntoView({behavior: 'smooth', block: 'end'});
+        }
+      }, 0);
+    });
+
     this.intervalID = setInterval(() => this.loadJob(), 1000);
     document.body.addEventListener('click', this.closeDropdown);
     this.hashChangeListener();
@@ -252,6 +272,8 @@ export default defineComponent({
       this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded;
       if (this.currentJobStepsStates[idx].expanded) {
         this.loadJobForce(); // try to load the data immediately instead of waiting for next timer interval
+      } else if (this.currentJob.steps[idx].status === 'running') {
+        this.currentJobStepsStates[idx].manuallyCollapsed = true;
       }
     },
     // cancel a run
@@ -293,7 +315,8 @@ export default defineComponent({
       const el = this.getJobStepLogsContainer(stepIndex);
       // if the logs container is empty, then auto-scroll if the step is expanded
       if (!el.lastChild) return this.currentJobStepsStates[stepIndex].expanded;
-      return isLogElementInViewport(el.lastChild as Element);
+      // use extraViewPortHeight to tolerate some extra "virtual view port" height (for example: the last line is partially visible)
+      return isLogElementInViewport(el.lastChild as Element, {extraViewPortHeight: 5});
     },
 
     appendLogs(stepIndex: number, startTime: number, logLines: LogLine[]) {
@@ -343,7 +366,6 @@ export default defineComponent({
       const abortController = new AbortController();
       this.loadingAbortController = abortController;
       try {
-        const isFirstLoad = !this.run.status;
         const job = await this.fetchJobData(abortController);
         if (this.loadingAbortController !== abortController) return;
 
@@ -353,10 +375,15 @@ export default defineComponent({
 
         // sync the currentJobStepsStates to store the job step states
         for (let i = 0; i < this.currentJob.steps.length; i++) {
-          const expanded = isFirstLoad && this.optionAlwaysExpandRunning && this.currentJob.steps[i].status === 'running';
+          const autoExpand = this.optionAlwaysExpandRunning && this.currentJob.steps[i].status === 'running';
           if (!this.currentJobStepsStates[i]) {
             // initial states for job steps
-            this.currentJobStepsStates[i] = {cursor: null, expanded};
+            this.currentJobStepsStates[i] = {cursor: null, expanded: autoExpand,  manuallyCollapsed: false};
+          } else {
+            // if the step is not manually collapsed by user, then auto-expand it if option is enabled
+            if (autoExpand && !this.currentJobStepsStates[i].manuallyCollapsed) {
+              this.currentJobStepsStates[i].expanded = true;
+            }
           }
         }
 
@@ -380,7 +407,10 @@ export default defineComponent({
           if (!autoScrollStepIndexes.get(stepIndex)) continue;
           autoScrollJobStepElement = this.getJobStepLogsContainer(stepIndex);
         }
-        autoScrollJobStepElement?.lastElementChild.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        const lastLogElem = autoScrollJobStepElement?.lastElementChild;
+        if (lastLogElem && !isLogElementInViewport(lastLogElem)) {
+          lastLogElem.scrollIntoView({behavior: 'smooth', block: 'end'});
+        }
 
         // clear the interval timer if the job is done
         if (this.run.done && this.intervalID) {
@@ -408,9 +438,13 @@ export default defineComponent({
       if (this.menuVisible) this.menuVisible = false;
     },
 
+    elStepsContainer(): HTMLElement {
+      return this.$refs.stepsContainer as HTMLElement;
+    },
+
     toggleTimeDisplay(type: 'seconds' | 'stamp') {
       this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`];
-      for (const el of (this.$refs.steps as HTMLElement).querySelectorAll(`.log-time-${type}`)) {
+      for (const el of this.elStepsContainer().querySelectorAll(`.log-time-${type}`)) {
         toggleElem(el, this.timeVisible[`log-time-${type}`]);
       }
     },
@@ -419,6 +453,7 @@ export default defineComponent({
       this.isFullScreen = !this.isFullScreen;
       toggleFullScreen('.action-view-right', this.isFullScreen, '.action-view-body');
     },
+
     async hashChangeListener() {
       const selectedLogStep = window.location.hash;
       if (!selectedLogStep) return;
@@ -431,7 +466,7 @@ export default defineComponent({
         // so logline can be selected by querySelector
         await this.loadJob();
       }
-      const logLine = (this.$refs.steps as HTMLElement).querySelector(selectedLogStep);
+      const logLine = this.elStepsContainer().querySelector(selectedLogStep);
       if (!logLine) return;
       logLine.querySelector<HTMLAnchorElement>('.line-num').click();
     },
@@ -566,7 +601,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
+        <div class="job-step-container" ref="stepsContainer" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
             <div class="job-step-summary" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon