diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 2d79a82288eb3..a703d5abeb838 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/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" prefix=""/>
       </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
@@ -52,12 +50,23 @@ onBeforeUnmount(() => {
 </template>
 <style scoped>
 .action-run-summary-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
   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;
+  }
+}
 </style>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 4ced86b523ba6..ec7ae7af736d0 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/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);
+  font-size: 13px;
+  color: var(--color-text-light-2);
 }
 
 .job-artifacts-item {
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index c311b87d980e4..23ed4a413da50 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -600,8 +600,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       <h4 class="graph-title">Workflow Dependencies</h4>
       <div class="graph-stats">
         {{ jobs.length }} jobs • {{ edges.length }} dependencies
-        <span v-if="graphMetrics" class="graph-metrics">
-          • {{ graphMetrics.successRate }} success
+        <span v-if="graphMetrics">
+          • <span class="graph-metrics">{{ graphMetrics.successRate }} success</span>
         </span>
       </div>
       <div class="flex-text-block">
@@ -753,6 +753,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;
 }