Commit status list squished on commit view

[parnic-sks]

Gitea Version

1.16.0

Operating System

Windows 11

Browser Version

Google Chrome Version 97.0.4692.99 (Official Build) (64-bit)

Can you reproduce the bug on the Gitea demo site?

Yes

Description

Clicking on the status icon after the commit summary on a commit view page shows a squished box that is very difficult to use. This worked fine in 1.15.x and broke in 1.16.0

Broken: https://try.gitea.io/parnic-sks/commit-status-test/commit/5333d3d91b0fabe51286fa8bbe2d996901ca60e6

It works fine in other locations, however:

• https://try.gitea.io/parnic-sks/commit-status-test/src/branch/main
• https://try.gitea.io/parnic-sks/commit-status-test/commits/branch/main

Screenshots

Broken:

Correct:

[zeripath]

From my testing it appears to be related to .ui.attached.header .right(not:dropdown) css selector setting the height to 30px;

If we add a height: auto then this problem goes away.

[parnic-sks]

@zeripath On 1.16.1, the box is the right size now, but the "Details" links on the right side are all stacked on top of one another:

This is visible in the try.gitea.io link in the description of this issue: https://try.gitea.io/parnic-sks/commit-status-test/commit/5333d3d91b0fabe51286fa8bbe2d996901ca60e6

[wxiaoguang]

It's caused by the postion: absolute:

[zeripath]

OK

diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl
index d2e9f0bd1..f33635abf 100644
--- a/templates/repo/commit_statuses.tmpl
+++ b/templates/repo/commit_statuses.tmpl
@@ -2,11 +2,11 @@
 <div class="ui popup very wide fixed basic commit-statuses">
 	<div class="ui relaxed list divided">
 		{{range .Statuses}}
-			<div class="ui item singular-status">
+			<div class="ui item singular-status df">
 				<span>{{template "repo/commit_status" .}}</span>
-				<span class="ui">{{.Context}} <span class="text grey">{{.Description}}</span></span>
+				<span class="ui f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
 				{{if .TargetURL}}
-					<div class="ui right"><a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.i18n.Tr "repo.pulls.status_checks_details"}}</a></div>
+					<div class="ui"><a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.i18n.Tr "repo.pulls.status_checks_details"}}</a></div>
 				{{end}}
 			</div>
 		{{end}}