From 62ae113f6ecde26c86ddfa45a853a964b820ec93 Mon Sep 17 00:00:00 2001
From: ita004 <shfahmd001@gmail.com>
Date: Sat, 4 Oct 2025 11:29:04 +0530
Subject: [PATCH 1/5] fix(actions): reliably auto-expand running steps &
 auto-scroll appended logs Fixes #35570

---
 web_src/js/components/RepoActionView.vue | 66 +++++++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 2eb221126986c..85e61e884bee9 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
-import {defineComponent, type PropType} from 'vue';
+import {defineComponent, nextTick, type PropType} from 'vue';
 import {createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {renderAnsi} from '../render/ansi.ts';
@@ -104,6 +104,7 @@ export default defineComponent({
       // internal state
       loadingAbortController: null as AbortController | null,
       intervalID: null as IntervalId | null,
+      mutationObserver: null as MutationObserver | null, // Observer for auto-expand/auto-scroll functionality
       currentJobStepsStates: [] as Array<Record<string, any>>,
       artifacts: [] as Array<Record<string, any>>,
       menuVisible: false,
@@ -185,11 +186,72 @@ export default defineComponent({
     document.body.addEventListener('click', this.closeDropdown);
     this.hashChangeListener();
     window.addEventListener('hashchange', this.hashChangeListener);
+
+    // === Auto Expand + Auto Scroll Fix (for Issue #35570) ===
+    // Ensure Vue has updated DOM for steps after initial load
+    await nextTick();
+
+    // Set up observer on the steps container (safer and more efficient than document.body)
+    const stepsContainer = (this.$refs.steps as HTMLElement);
+    if (stepsContainer && typeof MutationObserver !== 'undefined') {
+      this.mutationObserver = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          // Auto-scroll new log lines as they appear
+          if (m.type === 'childList') {
+            for (const n of m.addedNodes) {
+              if (n.nodeType === 1 && (n as Element).classList.contains('job-log-line')) {
+                if (this.optionAlwaysAutoScroll) {
+                  try { (n as Element).scrollIntoView({ behavior: 'smooth', block: 'end' }); }
+                  catch { (n as Element).scrollIntoView(); }
+                }
+              }
+            }
+          }
+
+          // Auto-expand running steps when their class changes
+          if (m.type === 'attributes' && m.attributeName === 'class') {
+            const t = m.target as Element;
+            if (t.classList && t.classList.contains('job-step-summary')) {
+              const stepAttr = t.getAttribute('data-step');
+              if (!stepAttr) continue;
+              const stepIndex = Number(stepAttr);
+              // If expand-running option is on and step is expandable but not selected, open it via state
+              if (this.optionAlwaysExpandRunning &&
+                  t.classList.contains('step-expandable') &&
+                  !t.classList.contains('selected')) {
+                // Update state inside nextTick to ensure Vue has finished rendering
+                nextTick(() => {
+                  if (!this.currentJobStepsStates[stepIndex]?.expanded) {
+                    // Update internal state so logs are immediately loaded
+                    this.currentJobStepsStates[stepIndex].expanded = true;
+                    this.loadJob();
+                  }
+                });
+              }
+            }
+          }
+        }
+      });
+
+      // Observe only the steps container subtree (minimized observation area)
+      this.mutationObserver.observe(stepsContainer, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+    // === End Fix ===
   },
 
   beforeUnmount() {
     document.body.removeEventListener('click', this.closeDropdown);
     window.removeEventListener('hashchange', this.hashChangeListener);
+    // Clean up MutationObserver to prevent memory leaks
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
   },
 
   unmounted() {
@@ -568,7 +630,7 @@ export default defineComponent({
         </div>
         <div class="job-step-container" ref="steps" 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']">
+            <div class="job-step-summary" :data-step="i" @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
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->

From 3090f46365467617a5626db9c0ab780d1c0a7628 Mon Sep 17 00:00:00 2001
From: ita004 <shfahmd001@gmail.com>
Date: Sat, 4 Oct 2025 13:51:42 +0530
Subject: [PATCH 2/5] fix(actions): auto-expand running steps reliably

---
 web_src/js/components/RepoActionView.vue | 79 +++++-------------------
 1 file changed, 15 insertions(+), 64 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 85e61e884bee9..0b3543087116d 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
-import {defineComponent, nextTick, type PropType} from 'vue';
+import {defineComponent, type PropType} from 'vue';
 import {createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {renderAnsi} from '../render/ansi.ts';
@@ -104,7 +104,6 @@ export default defineComponent({
       // internal state
       loadingAbortController: null as AbortController | null,
       intervalID: null as IntervalId | null,
-      mutationObserver: null as MutationObserver | null, // Observer for auto-expand/auto-scroll functionality
       currentJobStepsStates: [] as Array<Record<string, any>>,
       artifacts: [] as Array<Record<string, any>>,
       menuVisible: false,
@@ -186,72 +185,11 @@ export default defineComponent({
     document.body.addEventListener('click', this.closeDropdown);
     this.hashChangeListener();
     window.addEventListener('hashchange', this.hashChangeListener);
-
-    // === Auto Expand + Auto Scroll Fix (for Issue #35570) ===
-    // Ensure Vue has updated DOM for steps after initial load
-    await nextTick();
-
-    // Set up observer on the steps container (safer and more efficient than document.body)
-    const stepsContainer = (this.$refs.steps as HTMLElement);
-    if (stepsContainer && typeof MutationObserver !== 'undefined') {
-      this.mutationObserver = new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          // Auto-scroll new log lines as they appear
-          if (m.type === 'childList') {
-            for (const n of m.addedNodes) {
-              if (n.nodeType === 1 && (n as Element).classList.contains('job-log-line')) {
-                if (this.optionAlwaysAutoScroll) {
-                  try { (n as Element).scrollIntoView({ behavior: 'smooth', block: 'end' }); }
-                  catch { (n as Element).scrollIntoView(); }
-                }
-              }
-            }
-          }
-
-          // Auto-expand running steps when their class changes
-          if (m.type === 'attributes' && m.attributeName === 'class') {
-            const t = m.target as Element;
-            if (t.classList && t.classList.contains('job-step-summary')) {
-              const stepAttr = t.getAttribute('data-step');
-              if (!stepAttr) continue;
-              const stepIndex = Number(stepAttr);
-              // If expand-running option is on and step is expandable but not selected, open it via state
-              if (this.optionAlwaysExpandRunning &&
-                  t.classList.contains('step-expandable') &&
-                  !t.classList.contains('selected')) {
-                // Update state inside nextTick to ensure Vue has finished rendering
-                nextTick(() => {
-                  if (!this.currentJobStepsStates[stepIndex]?.expanded) {
-                    // Update internal state so logs are immediately loaded
-                    this.currentJobStepsStates[stepIndex].expanded = true;
-                    this.loadJob();
-                  }
-                });
-              }
-            }
-          }
-        }
-      });
-
-      // Observe only the steps container subtree (minimized observation area)
-      this.mutationObserver.observe(stepsContainer, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['class'],
-      });
-    }
-    // === End Fix ===
   },
 
   beforeUnmount() {
     document.body.removeEventListener('click', this.closeDropdown);
     window.removeEventListener('hashchange', this.hashChangeListener);
-    // Clean up MutationObserver to prevent memory leaks
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-      this.mutationObserver = null;
-    }
   },
 
   unmounted() {
@@ -422,6 +360,19 @@ export default defineComponent({
           }
         }
 
+        // Auto-expand running steps if option is enabled (fix for Issue #35570)
+        for (let i = 0; i < this.currentJob.steps.length; i++) {
+          const step = this.currentJob.steps[i];
+          const state = this.currentJobStepsStates[i];
+          if (
+            this.optionAlwaysExpandRunning &&
+            step.status === 'running' &&
+            !state.expanded
+          ) {
+            state.expanded = true;
+          }
+        }
+
         // find the step indexes that need to auto-scroll
         const autoScrollStepIndexes = new Map<number, boolean>();
         for (const logs of job.logs.stepsLog ?? []) {
@@ -630,7 +581,7 @@ export default defineComponent({
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" :data-step="i" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
+            <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
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->

From e52badf084e9bb96b047be5c6371985cc6cd348f Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 4 Oct 2025 19:46:43 +0800
Subject: [PATCH 3/5] fix

---
 routers/web/devtest/mock_actions.go      | 40 ++++++++++++++--------
 web_src/js/components/RepoActionView.vue | 42 +++++++++++++-----------
 2 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index bc741ecd114de..2134de39aac3e 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -6,6 +6,7 @@ package devtest
 import (
 	mathRand "math/rand/v2"
 	"net/http"
+	"slices"
 	"strconv"
 	"strings"
 	"time"
@@ -17,24 +18,28 @@ 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
-	}
+	)
+	// 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 i := 0; i < mockCount; i++ {
 		logStr := mockedLogs[int(cur)%len(mockedLogs)]
 		cur++
@@ -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 {
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 0b3543087116d..298be33a81ca0 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -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)) {
@@ -56,7 +62,8 @@ function parseLineCommand(line: LogLine): LogLineCommand | null {
 
 function isLogElementInViewport(el: Element): 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 + 10;
 }
 
 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,
@@ -252,6 +259,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
@@ -343,7 +352,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,23 +361,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};
-          }
-        }
-
-        // Auto-expand running steps if option is enabled (fix for Issue #35570)
-        for (let i = 0; i < this.currentJob.steps.length; i++) {
-          const step = this.currentJob.steps[i];
-          const state = this.currentJobStepsStates[i];
-          if (
-            this.optionAlwaysExpandRunning &&
-            step.status === 'running' &&
-            !state.expanded
-          ) {
-            state.expanded = true;
+            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;
+            }
           }
         }
 
@@ -393,7 +393,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) {
@@ -432,6 +435,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;

From fff95348992e03bc398fa62ee11511a24eee87ca Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 4 Oct 2025 20:30:08 +0800
Subject: [PATCH 4/5] improve log group auto-scrolling

---
 web_src/js/components/RepoActionView.vue | 25 ++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 298be33a81ca0..b65751dd37196 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/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';
@@ -188,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();
@@ -424,9 +437,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}`]);
       }
     },
@@ -448,7 +465,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();
     },
@@ -583,7 +600,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

From 1b227142ac848c5dda02e5c80667a63e6b149a8e Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 4 Oct 2025 20:45:31 +0800
Subject: [PATCH 5/5] fix lint, improve isLogElementInViewport

---
 routers/web/devtest/mock_actions.go      | 2 +-
 web_src/js/components/RepoActionView.vue | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 2134de39aac3e..90c6f99d5ed25 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -40,7 +40,7 @@ func generateMockStepsLog(logCur actions.LogCursor, opts generateMockStepsLogOpt
 	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 i := 0; i < mockCount; i++ {
+	for range mockCount {
 		logStr := mockedLogs[int(cur)%len(mockedLogs)]
 		cur++
 		logStr = strings.ReplaceAll(logStr, "{step}", strconv.Itoa(logCur.Step))
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index b65751dd37196..b90aef7411f0f 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -60,10 +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();
   // 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 + 10;
+  return 0 <= rect.bottom && rect.bottom <= window.innerHeight + extraViewPortHeight;
 }
 
 type LocaleStorageOptions = {
@@ -315,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[]) {