enhance: Adjust Workflow Graph styling (#37497)

- Fix workflow dependency graph overflow by making the graph container
scrollable (no more clipped DAGs; addresses #37493).
- Improve Actions job list readability by keeping durations
fixed-width/right-aligned so long times don’t squeeze job names.
- Make workflow graph layout more intuitive by vertically centering
shorter columns to reduce misleading “looks like it depends on”
alignments (addresses #37395).

### Screenshot
<img width="966" height="439"
src="https://github.com/user-attachments/assets/c180c5a2-4f56-4287-bcaa-f2735ba72949"
/>

<img width="949" height="559"
src="https://github.com/user-attachments/assets/a383511d-a962-4920-b792-69f556847eff"
/>



Fixes #37493
Fixes #37395

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Author: 4 people

routers/web/devtest/mock_actions.go

@@ -214,6 +214,75 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		return fmt.Sprintf("%s/jobs/%d", resp.State.Run.Link, jobID)
 	}
 
+	// Keep devtest mock runs minimal: use run 10 as a "complex graph" repro.
+	// This combines long durations, parallel roots, and a multi-dependency downstream job
+	// to validate the workflow graph rendering.
+	if runID == 10 {
+		resp.State.Run.WorkflowID = "workflow-devtest-complex"
+		resp.State.Run.Duration = "7h 12m 34s"
+
+		type mj struct {
+			jobID    string
+			name     string
+			status   actions_model.Status
+			duration string
+			needs    []string
+		}
+		mockJobs := []mj{
+			{jobID: "job-100", name: "job-100", status: actions_model.StatusSuccess, duration: "3s", needs: nil},
+			{jobID: "job-101", name: "job-101", status: actions_model.StatusSuccess, duration: "3s", needs: []string{"job-100"}},
+			{jobID: "job-102", name: "job-102", status: actions_model.StatusSuccess, duration: "4s", needs: []string{"job-100", "job-101"}},
+			{jobID: "job-103", name: "job-103", status: actions_model.StatusSuccess, duration: "2s", needs: []string{"job-100"}},
+
+			{jobID: "prep-jdk", name: "prep-jdk", status: actions_model.StatusSuccess, duration: "3s", needs: nil},
+			{jobID: "code-analysis", name: "code-analysis", status: actions_model.StatusSuccess, duration: "3s", needs: nil},
+
+			// Matrix expansion (the " (...)" suffix is the heuristic the frontend uses to group rows)
+			{jobID: "matrix-e2e-1-chromium", name: "matrix-e2e (1, chromium)", status: actions_model.StatusSuccess, duration: "2s", needs: []string{"prep-jdk"}},
+			{jobID: "matrix-e2e-1-firefox", name: "matrix-e2e (1, firefox)", status: actions_model.StatusSuccess, duration: "2s", needs: []string{"prep-jdk"}},
+			{jobID: "matrix-e2e-2-chromium", name: "matrix-e2e (2, chromium)", status: actions_model.StatusSuccess, duration: "2s", needs: []string{"prep-jdk"}},
+			{jobID: "matrix-e2e-3-chromium", name: "matrix-e2e (3, chromium)", status: actions_model.StatusSuccess, duration: "4s", needs: []string{"prep-jdk"}},
+			{jobID: "matrix-e2e-3-firefox", name: "matrix-e2e (3, firefox)", status: actions_model.StatusSuccess, duration: "2s", needs: []string{"prep-jdk"}},
+			{jobID: "matrix-e2e-99-webkit", name: "matrix-e2e (99, webkit)", status: actions_model.StatusSuccess, duration: "2s", needs: []string{"prep-jdk"}},
+
+			{jobID: "unit-test", name: "unit-test", status: actions_model.StatusSuccess, duration: "3s", needs: []string{"prep-jdk"}},
+			{jobID: "arch-test", name: "arch-test", status: actions_model.StatusSuccess, duration: "3s", needs: []string{"prep-jdk"}},
+			{jobID: "integration-test", name: "integration-test", status: actions_model.StatusSuccess, duration: "4s", needs: []string{"prep-jdk"}},
+
+			{jobID: "build-image", name: "build-image", status: actions_model.StatusSuccess, duration: "3s", needs: []string{
+				"unit-test",
+				"arch-test",
+				"integration-test",
+				"code-analysis",
+				"matrix-e2e-1-chromium",
+				"matrix-e2e-1-firefox",
+				"matrix-e2e-2-chromium",
+				"matrix-e2e-3-chromium",
+				"matrix-e2e-3-firefox",
+				"matrix-e2e-99-webkit",
+			}},
+		}
+
+		resp.State.Run.Jobs = nil
+		for i, j := range mockJobs {
+			id := runID*1000 + int64(i)
+			resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
+				ID:       id,
+				Link:     jobLink(id),
+				JobID:    j.jobID,
+				Name:     j.name,
+				Status:   j.status.String(),
+				CanRerun: j.jobID == "job-100",
+				Duration: j.duration,
+				Needs:    j.needs,
+			})
+		}
+
+		fillViewRunResponseCurrentJob(ctx, resp)
+		ctx.JSON(http.StatusOK, resp)
+		return
+	}
+
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
 		ID:       runID * 10,
 		Link:     jobLink(runID * 10),
@@ -240,7 +309,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Name:     "ULTRA LOOOOOOOOOOOONG job name 102 that exceeds the limit",
 		Status:   actions_model.StatusFailure.String(),
 		CanRerun: false,
-		Duration: "3h",
+		Duration: "3h35m10s",
 		Needs:    []string{"job-100", "job-101"},
 	})
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{

templates/devtest/repo-action-view.tmpl

@@ -1,11 +1,11 @@
 {{template "base/head" .}}
 <div class="page-content">
 	<div class="flex-text-block tw-justify-center tw-gap-5">
-		<a href="/devtest/repo-action-view/runs/10">Run:CanCancel</a>
-		<a href="/devtest/repo-action-view/runs/20">Run:CanApprove</a>
-		<a href="/devtest/repo-action-view/runs/30">Run:CanRerunLatest</a>
-		<a href="/devtest/repo-action-view/runs/10/attempts/2">Run:PreviousAttempt</a>
-		<a href="/devtest/repo-action-view/runs/40">Run:ReusableCaller</a>
+		<a href="{{AppSubUrl}}/devtest/repo-action-view/runs/10">Run:CanCancel</a>
+		<a href="{{AppSubUrl}}/devtest/repo-action-view/runs/20">Run:CanApprove</a>
+		<a href="{{AppSubUrl}}/devtest/repo-action-view/runs/30">Run:CanRerunLatest</a>
+		<a href="{{AppSubUrl}}/devtest/repo-action-view/runs/10/attempts/2">Run:PreviousAttempt</a>
+		<a href="{{AppSubUrl}}/devtest/repo-action-view/runs/40">Run:ReusableCaller</a>
 	</div>
 	{{template "repo/actions/view_component" (dict
 		"JobID" (or .JobID 0)

web_src/js/components/ActionRunJobView.vue

@@ -2,7 +2,6 @@
 import {computed, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import ActionStatusIcon from './ActionStatusIcon.vue';
-import WorkflowGraph from './WorkflowGraph.vue';
 import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime, formatDatetimeISO} from '../utils/time.ts';
 import {POST} from '../modules/fetch.ts';
@@ -13,7 +12,6 @@ import {localUserSettings} from '../modules/user-settings.ts';
 import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
 import {
   type ActionRunViewStore,
-  collectCallerChildJobs,
   createLogLineMessage,
   type LogLine,
   type LogLineCommand,
@@ -118,14 +116,11 @@ const currentJob = ref<CurrentJob>({
 const stepsContainer = ref<HTMLElement | null>(null);
 const jobStepLogs = ref<Array<StepContainerElement | undefined>>([]);
 
-// Reusable workflow caller view: when the selected job is a caller node, the right pane
-// shows the children list rather than step logs (callers don't run on a runner).
+// Reusable workflow caller view: the right pane shows just the header (name + uses path +
+// status). Callers don't run on a runner, and the dependency graph for their children lives
+// in the run summary's WorkflowGraph, not here — matching GitHub Actions.
 const selectedJob = computed<ActionsJob | undefined>(() => (run.value.jobs || []).find((it) => it.id === props.jobId));
 const isCallerJob = computed(() => Boolean(selectedJob.value?.isReusableCaller));
-const callerChildJobs = computed<ActionsJob[]>(() => {
-  if (!isCallerJob.value) return [];
-  return collectCallerChildJobs(run.value.jobs || [], props.jobId);
-});
 
 watch(optionAlwaysAutoScroll, () => {
   saveLocaleStorageOptions();
@@ -477,20 +472,6 @@ async function hashChangeListener() {
       </div>
     </div>
   </div>
-  <!-- Caller (reusable workflow) view: render the direct children's dependency graph,
-       mirroring the run summary's WorkflowGraph but scoped to this caller's subtree.
-       The caller's name + uses path + status all live in job-info-header above. -->
-  <div class="caller-children-container" v-if="isCallerJob">
-    <WorkflowGraph
-      v-if="callerChildJobs.length > 0"
-      :store="store"
-      :jobs="callerChildJobs"
-      :run-link="run.link"
-      :workflow-id="`${run.workflowID}#caller-${props.jobId}`"
-      :locale="locale"
-    />
-  </div>
-
   <!-- always create the node because we have our own event listeners on it, don't use "v-if" -->
   <div class="job-step-container" ref="stepsContainer" v-show="!isCallerJob && currentJob.steps.length">
     <div class="job-step-section" v-for="(jobStep, stepIdx) in currentJob.steps" :key="stepIdx">
@@ -578,8 +559,7 @@ async function hashChangeListener() {
   border-radius: 3px;
 }
 
-.job-info-header:has(+ .job-step-container),
-.job-info-header:has(+ .caller-children-container) {
+.job-info-header:has(+ .job-step-container) {
   border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
@@ -613,14 +593,6 @@ async function hashChangeListener() {
   min-width: 0;
 }
 
-.caller-children-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid var(--color-console-border);
-  color: var(--color-console-fg);
-}
-
 .job-step-container {
   max-height: 100%;
   border-radius: 0 0 var(--border-radius) var(--border-radius);

web_src/js/components/ActionRunView.ts

@@ -104,12 +104,6 @@ export function buildJobsByParentJobID(jobs: ActionsJob[]): Map<number, ActionsJ
   return childrenByParent;
 }
 
-// collectCallerChildJobs returns the direct children of a caller job.
-export function collectCallerChildJobs(jobs: ActionsJob[], callerJobID: number): ActionsJob[] {
-  if (!callerJobID) return [];
-  return buildJobsByParentJobID(jobs).get(callerJobID) || [];
-}
-
 export function createEmptyActionsRun(): ActionsRun {
   return {
     repoId: 0,

web_src/js/components/RepoActionView.vue

@@ -26,7 +26,6 @@ const {currentRun: run, runArtifacts: artifacts} = toRefs(store.viewData);
 type JobListItem = {
   job: ActionsJob;
   depth: number;
-  hasChildren: boolean;
 };
 
 // Caller jobs default to collapsed. Membership in this set means "user has manually expanded this caller"
@@ -71,9 +70,8 @@ const visibleJobListItems = computed<JobListItem[]>(() => {
   while (stack.length > 0) {
     const {job, depth} = stack.pop()!;
     const children = childrenByParent.get(job.id) || [];
-    const hasChildren = children.length > 0;
-    result.push({job, depth, hasChildren});
-    if (hasChildren && isJobCollapsed(job.id)) continue;
+    result.push({job, depth});
+    if (children.length > 0 && isJobCollapsed(job.id)) continue;
     for (let i = children.length - 1; i >= 0; i--) stack.push({job: children[i], depth: depth + 1});
   }
   return result;
@@ -216,24 +214,28 @@ async function deleteArtifact(name: string) {
             v-for="item in visibleJobListItems"
             :key="item.job.id"
           >
-            <a class="tw-contents silenced" :href="item.job.link">
-              <ActionStatusIcon :locale-status="locale.status[item.job.status]" :status="item.job.status" icon-variant="circle-fill"/>
-              <span class="tw-min-w-0 gt-ellipsis">{{ item.job.name }}</span>
-              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${item.job.id}/rerun`" v-if="item.job.canRerun"/>
-              <span class="job-duration">{{ item.job.duration }}</span>
-            </a>
+            <!-- Callers have no log page of their own; the whole row toggles expansion
+                 (matches GitHub Actions, where caller rows are not navigation targets). -->
             <button
-              v-if="item.hasChildren"
+              v-if="item.job.isReusableCaller"
               type="button"
-              class="job-brief-toggle"
-              :class="{'collapsed': isJobCollapsed(item.job.id)}"
+              class="tw-contents caller-row-toggle"
               @click="toggleExpandedJob(item.job.id)"
               :title="isJobCollapsed(item.job.id) ? locale.expandCallerJobs : locale.collapseCallerJobs"
               :aria-label="isJobCollapsed(item.job.id) ? locale.expandCallerJobs : locale.collapseCallerJobs"
               :aria-expanded="!isJobCollapsed(item.job.id)"
             >
-              <SvgIcon name="octicon-chevron-down" :size="14"/>
+              <ActionStatusIcon :locale-status="locale.status[item.job.status]" :status="item.job.status" icon-variant="circle-fill"/>
+              <span class="tw-min-w-0 gt-ellipsis">{{ item.job.name }}</span>
+              <span class="job-duration">{{ item.job.duration }}</span>
+              <SvgIcon name="octicon-chevron-down" :size="14" class="job-brief-toggle-icon" :class="{'collapsed': isJobCollapsed(item.job.id)}"/>
             </button>
+            <a v-else class="tw-contents silenced" :href="item.job.link">
+              <ActionStatusIcon :locale-status="locale.status[item.job.status]" :status="item.job.status" icon-variant="circle-fill"/>
+              <span class="tw-min-w-0 gt-ellipsis">{{ item.job.name }}</span>
+              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${item.job.id}/rerun`" v-if="item.job.canRerun"/>
+              <span class="job-duration">{{ item.job.duration }}</span>
+            </a>
           </div>
         </div>
 
@@ -258,7 +260,7 @@ async function deleteArtifact(name: string) {
                   <SvgIcon name="octicon-trash"/>
                 </a>
               </template>
-              <span v-else class="flex-text-block tw-flex-1 tw-text-text-light-2">
+              <span v-else class="flex-text-block tw-flex-1 tw-min-w-0 tw-text-text-light-2">
                 <SvgIcon name="octicon-file-removed"/>
                 <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
                 <span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
@@ -406,23 +408,23 @@ async function deleteArtifact(name: string) {
   background-color: var(--color-active);
 }
 
-.job-brief-toggle {
+.caller-row-toggle {
   border: none;
   padding: 0;
   background: transparent;
-  cursor: pointer;
   color: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  cursor: pointer;
+  text-align: inherit;
+}
+
+.job-brief-toggle-icon {
   flex-shrink: 0;
-  /* the icon is always chevron-down; flip to chevron-up when expanded */
   transition: transform 0.15s ease;
-  /* sit right after the job name; rerun/duration float to the right via auto-margin */
+  /* sit between name and duration; duration uses order:2 with margin-left:auto to float right */
   order: 1;
 }
 
-.job-brief-toggle:not(.collapsed) {
+.job-brief-toggle-icon:not(.collapsed) {
   transform: rotate(180deg);
 }