kyush/forgejo
1
0
Fork 0
forked from mirrors/forgejo
Code Pull requests Activity

[v14.0/forgejo] fix(ui): actions list layout breakage with long content (#10723)

Browse source 
**Backport:** https://codeberg.org/forgejo/forgejo/pulls/10648

Fixes issue #4580

## Context

Fixes the layout of the actions list specifically when an action name is too long to be displayed within the column's constrained width.

I took the opportunity to add some ancillary improvements:
- Center elements vertically
- Space elements consistently: the error badge didn't have the same margin on the left like the disabled badge.

Co-authored-by: Luis <luis@adame.dev>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10723
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
This commit is contained in:
forgejo-backport-action 2026-01-07 15:17:15 +01:00 • committed by 0ko
commit 0b7e6ff363
2 changed files with 29 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
templates/repo/actions/list_inner.tmpl
View file

@ -1,12 +1,16 @@
{{if .HasWorkflowsOrRuns}}
<div class="ui stackable grid">
<div class="four wide column">
<div class="ui fluid vertical menu">
<div class="ui fluid vertical menu actions-menu">
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
{{range .workflows}}
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">
<span class="content" data-tooltip-content="{{.Entry.Name}}">
{{.Entry.Name}}
</span>
{{if .ErrMsg}}
<span data-tooltip-content="{{.ErrMsg}}">
<span class="error" data-tooltip-content="{{.ErrMsg}}">
{{svg "octicon-alert" 16 "text red"}}
</span>
{{end}}

23
web_src/css/actions.css
View file

@ -55,7 +55,7 @@
.run-list-item-right .run-list-meta {
display: flex;
flex-wrap: nowrap;
gap: .25rem;
gap: 0.25rem;
align-items: center;
}
@ -103,3 +103,24 @@
transform: rotate(-360deg);
}
}
.ui.vertical.menu .item:not(:has(> :nth-child(1))),
.ui.vertical.menu .item .content {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ui.vertical.menu .item:has(.content) {
display: flex;
}
.ui.vertical.menu.actions-menu .item .error {
display: flex;
align-items: center;
margin-left: 1rem;
}
.ui.vertical.menu.actions-menu .item .label {
flex-shrink: 0;
}