mirrors/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-06-14 07:34:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): prevent commit status popup overflowing its row (#38081)

Browse Source 
Fixes #38079

## Regression path

The layout previously had `.commit-status-item .status-context { flex: 1
}`,
which let the context fill remaining space and ellipsize. That rule was
dropped in #37517 ("Refactor pull request view (5)") when the row markup
moved to nested `.flex-text-block` wrappers, so nothing constrained the
left block anymore.

After:
<img width="832" height="242" alt="image"
src="https://github.com/user-attachments/assets/a20019f8-6016-40f7-8901-2808280dc093"
/>

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
bircni
2026-06-13 12:14:02 +02:00
committed by GitHub
parent a68ee6a405
commit aab9737651
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/repo/pulls/status_items.tmpl
View File

@@ -6,14 +6,14 @@
{{$commitActionsStatuses := ctx.ActionsUtils.CommitStatusesToActionsStatuses $.CommitStatuses}}
{{range $cs := $.CommitStatuses}}
<div class="item commit-status-item">
<div class="flex-text-block">
<div class="flex-text-block tw-flex-1">
{{$actionStatus := $commitActionsStatuses.IconStatus $cs}}
{{if $actionStatus}}
{{template "repo/icons/action_status" (dict "Status" $actionStatus "Size" 18 "ClassName" "commit-status icon")}}
{{else}}
{{template "repo/icons/commit_status" $cs}}
{{end}}
<div class="status-context gt-ellipsis">
<div class="gt-ellipsis">
{{$cs.Context}} <span class="tw-text-text-light-2">{{$cs.Description}}</span>
</div>
</div>
@@ -29,9 +29,9 @@
{{end}}
{{range $missingCheck := $statusCheckData.MissingRequiredChecks}}
<div class="item commit-status-item">
<div class="flex-text-block">
<div class="flex-text-block tw-flex-1">
{{svg "octicon-dot-fill" 16 "commit-status icon tw-text-yellow"}}
<div class="status-context gt-ellipsis">{{$missingCheck}}</div>
<div class="gt-ellipsis">{{$missingCheck}}</div>
</div>
<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
</div>

5
web_src/css/base.css
View File

@@ -840,7 +840,8 @@ table th[data-sortt-desc] .svg {
align-items: center;
gap: var(--gap-inline);
vertical-align: middle;
min-width: 0; /* make ellipsis work */
max-width: 100%; /* the inner part might have "gt-ellipsis" */
min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
}
.ui.ui.labeled.button {
@@ -856,6 +857,7 @@ table th[data-sortt-desc] .svg {
justify-content: space-between;
align-items: center;
gap: var(--gap-block);
max-width: 100%;
min-width: 0;
}
@@ -868,6 +870,7 @@ table th[data-sortt-desc] .svg {
align-items: center;
gap: var(--gap-block);
max-width: 100%;
min-width: 0;
}
.flex-left-right > .ui.button,

4
web_src/css/repo.css
View File

@@ -1863,11 +1863,11 @@ tbody.commit-list {
}
.username-display {
max-width: 100%; /* the inner part might have "gt-ellipsis" */
min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
display: inline-flex;
gap: var(--gap-inline);
align-items: center;
max-width: 100%; /* min/max widths are for "gt-ellipsis", see the comment of other "flex-xxx" family classes */
min-width: 0;
}
.username-display > .username-fullname {