Fix action run view style regressions from go-gitea#36883

- Fix `.left-list-header` unreadable on dark theme by using
  `--color-text-light-2` instead of `--color-grey`
- Fix `.graph-metrics` bullet inheriting blue color
- Improve summary block layout with horizontal flexbox
- Add dot separator between status and duration

Co-Authored-By: Claude (claude-opus-4-6) <[email protected]>

Author: 2 people

web_src/js/components/ActionRunSummaryView.vue

@@ -32,13 +32,11 @@ onBeforeUnmount(() => {
   <div>
     <div class="action-run-summary-block">
       <p class="action-run-summary-trigger">
-        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}
-        &nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso" prefix=" "/>
+        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso"/>
       </p>
       <p class="tw-mb-0">
         <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
-        <span class="tw-ml-2">{{ locale.status[run.status] }}</span>
-        <span class="tw-ml-3">{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
+        <span class="tw-ml-2">{{ locale.status[run.status] }}</span>&nbsp;•&nbsp;<span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
       </p>
     </div>
     <WorkflowGraph
@@ -53,12 +51,25 @@ onBeforeUnmount(() => {
 </template>
 <style scoped>
 .action-run-summary-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 12px;
   border-bottom: 1px solid var(--color-secondary);
 }
 
 .action-run-summary-trigger {
-  margin-bottom: 6px;
+  margin-bottom: 0;
   color: var(--color-text-light-2);
 }
+
+@media (max-width: 767.98px) {
+  .action-run-summary-block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .action-run-summary-trigger {
+    margin-bottom: 6px;
+  }
+}
 </style>

web_src/js/components/RepoActionView.vue

@@ -235,8 +235,8 @@ async function deleteArtifact(name: string) {
 }
 
 .left-list-header {
-  font-size: 12px;
-  color: var(--color-grey-light);
+  font-size: 13px;
+  color: var(--color-text-light-2);
 }
 
 .job-artifacts-item {

web_src/js/components/WorkflowGraph.vue

@@ -558,9 +558,9 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       <h4 class="graph-title">Workflow Dependencies</h4>
       <div class="graph-stats">
         {{ jobs.length }} jobs • {{ edges.length }} dependencies
-        <span class="graph-metrics">
-          • {{ graphMetrics.successRate }} success
-        </span>
+        <template v-if="graphMetrics">
+          • <span class="graph-metrics">{{ graphMetrics.successRate }} success</span>
+        </template>
       </div>
       <div class="flex-text-block">
         <button @click="zoomIn" class="ui compact tiny icon button" title="Zoom in">
@@ -683,6 +683,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   align-items: center;
   padding: 8px 14px;
   background: var(--color-box-header);
+  border-bottom: 1px solid var(--color-secondary);
   gap: 20px;
   flex-wrap: wrap;
 }