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>

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);