Fix action run view style regressions from #36883#36987
Closed
silverwind wants to merge 3 commits intogo-gitea:mainfrom
Closed
Fix action run view style regressions from #36883#36987silverwind wants to merge 3 commits intogo-gitea:mainfrom
silverwind wants to merge 3 commits intogo-gitea:mainfrom
Conversation
GiteaBot
added
the
lgtm/need 2
- 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]>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes UI regressions in the Actions run “summary” and workflow graph header styling introduced by #36883, primarily improving readability/contrast and separator rendering across themes and breakpoints.
Changes:
- Adjust sidebar “All jobs” header typography/color for better dark-theme contrast.
- Refine workflow graph header separators and add a header bottom border.
- Rework the summary header layout to use a horizontal flex layout with a mobile column breakpoint and add dot separators between metadata items.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| web_src/js/components/WorkflowGraph.vue | Tweaks header stats/metrics separator markup and adds a bottom border to the graph header. |
| web_src/js/components/RepoActionView.vue | Improves .left-list-header readability (font size + text color variable). |
| web_src/js/components/ActionRunSummaryView.vue | Updates summary header layout (flex + breakpoint) and introduces dot separators in the summary metadata. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add prefix="" to <relative-time> to prevent default "on" prefix - Wrap graph metrics bullet in <span> to keep it as single flex item Co-Authored-By: Claude (claude-opus-4-6) <[email protected]>
Co-Authored-By: Claude (claude-opus-4-6) <[email protected]>
wxiaoguang
reviewed
Mar 25, 2026
| <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> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span> |
Contributor
There was a problem hiding this comment.
It can use flex instead of depending on the "newline/space" behavior.
<p class="tw-mb-0"> => <div class="flex-text-inline">
wxiaoguang
reviewed
Mar 25, 2026
| <span v-if="graphMetrics" class="graph-metrics"> | ||
| • {{ graphMetrics.successRate }} success | ||
| <span v-if="graphMetrics"> | ||
| • <span class="graph-metrics">{{ graphMetrics.successRate }} success</span> |
Contributor
There was a problem hiding this comment.
Many style fine tuning changes can be done in Restyle Workflow Graph #36912 . Otherwise, merge conflicts
Member
Author
There was a problem hiding this comment.
Hmm I can also merge this branch onto there instead.
wxiaoguang
reviewed
Mar 26, 2026
| font-size: 12px; | ||
| color: var(--color-grey); | ||
| font-size: 13px; | ||
| color: var(--color-text-light-2); |
Member
|
All moved to #36912 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix style regressions introduced in #36883:
.left-list-header("All jobs") unreadable on dark theme by using--color-text-light-2instead of--color-grey(#384149in dark theme has no contrast).graph-metricsbullet separator inheriting blue--color-primarycolor