Skip to content

Fix action run view style regressions from #36883 #36987

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
silverwind wants to merge 3 commits into from
Closed

Fix action run view style regressions from #36883 #36987

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da75b43
Fix action run view style regressions from #36883
silverwind Mar 25, 2026
b1583de
Fix relative-time prefix and graph-stats flex layout
silverwind Mar 25, 2026
b860194
Use gap instead of margin-bottom in action-run-summary-block
silverwind Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions web_src/js/components/ActionRunSummaryView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Copy Markdown
Contributor

@wxiaoguang wxiaoguang Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can use flex instead of depending on the "newline/space" behavior.

<p class="tw-mb-0"> => <div class="flex-text-inline">

</p>
</div>
<WorkflowGraph
Expand All @@ -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>
4 changes: 2 additions & 2 deletions web_src/js/components/RepoActionView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Copy Markdown
Contributor

@wxiaoguang wxiaoguang Mar 26, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Restyle Workflow Graph #36912

}

.job-artifacts-item {
Expand Down
5 changes: 3 additions & 2 deletions web_src/js/components/WorkflowGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Copy Markdown
Contributor

@wxiaoguang wxiaoguang Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Many style fine tuning changes can be done in Restyle Workflow Graph #36912 . Otherwise, merge conflicts

Copy link
Copy Markdown
Member Author

@silverwind silverwind Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I can also merge this branch onto there instead.

</span>
</div>
<div class="flex-text-block">
Expand Down Expand Up @@ -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;
}
Expand Down