Restyle Workflow Graph (#36912)

Follow GitHub's style and fine tune colors & layouts.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>

web_src/js/components/ActionRunSummaryView.vue

@@ -29,35 +29,42 @@ onBeforeUnmount(() => {
 });
 </script>
 <template>
-  <div>
+  <div class="action-run-summary-view">
     <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=" "/>
-      </p>
-      <p class="tw-mb-0">
+      <div class="flex-text-block">
+        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }} • <relative-time :datetime="runTriggeredAtIso" prefix=""/>
+      </div>
+      <div class="flex-text-block">
         <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>
-      </p>
+        <span>{{ locale.status[run.status] }}</span> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
+      </div>
     </div>
     <WorkflowGraph
       v-if="run.jobs.length > 0"
+      :store="store"
       :jobs="run.jobs"
       :run-link="run.link"
       :workflow-id="run.workflowID"
-      class="workflow-graph-container"
     />
   </div>
 </template>
 <style scoped>
-.action-run-summary-block {
-  padding: 12px;
-  border-bottom: 1px solid var(--color-secondary);
+.action-run-summary-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-text-light-1);
 }
 
-.action-run-summary-trigger {
-  margin-bottom: 6px;
-  color: var(--color-text-light-2);
+.action-run-summary-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 12px;
+  border-bottom: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  background: var(--color-box-header);
 }
 </style>

web_src/js/components/ActionRunView.ts

@@ -89,6 +89,7 @@ export function createLogLineMessage(line: LogLine, cmd: LogLineCommand | null)
 
 export function createEmptyActionsRun(): ActionsRun {
   return {
+    repoId: 0,
     link: '',
     title: '',
     titleHTML: '',

web_src/js/components/RepoActionView.vue

@@ -222,7 +222,11 @@ async function deleteArtifact(name: string) {
   max-width: 400px;
   position: sticky;
   top: 12px;
-  max-height: 100vh;
+
+  /* about 12px top padding + 12px bottom padding + 37px footer height,
+  TODO: need to use JS to calculate the height for better scrolling experience*/
+  max-height: calc(100vh - 62px);
+
   overflow-y: auto;
   background: var(--color-body);
   z-index: 2; /* above .job-info-header */
@@ -231,12 +235,13 @@ async function deleteArtifact(name: string) {
 @media (max-width: 767.98px) {
   .action-view-left {
     position: static; /* can not sticky because multiple jobs would overlap into right view */
+    max-height: unset;
   }
 }
 
 .left-list-header {
-  font-size: 12px;
-  color: var(--color-grey);
+  font-size: 13px;
+  color: var(--color-text-light-2);
 }
 
 .job-artifacts-item {
@@ -299,7 +304,6 @@ async function deleteArtifact(name: string) {
 
 .job-brief-item .job-brief-item-left .job-brief-name {
   display: block;
-  width: 70%;
 }
 
 .job-brief-item .job-brief-item-right {
@@ -320,7 +324,6 @@ async function deleteArtifact(name: string) {
   border: 1px solid var(--color-console-border);
   border-radius: var(--border-radius);
   background: var(--color-console-bg);
-  align-self: flex-start;
 }
 
 /* begin fomantic button overrides */