UI: Fix overflow issues in repo (#7190)

- Fix layout overflow in repo file list.
- Fix invisible status icon in file view and commit list. In file view,
  the icon was moved to the left because I could not figure out a proper
  fix because of HTML tables.
- Added title attribute to commit messages.
- Fixed two CSS linter warnings in existing CSS.
- Fixed CI variable check in 'make css'.

Fixes: https://github.com/go-gitea/gitea/issues/7180

Makefile

@@ -395,7 +395,7 @@ css:
 	npx postcss --use autoprefixer --no-map --replace public/css/*
 
 	@diff=$$(git diff public/css/*); \
-	if ([ ! -z "$CI" ] && [ -n "$$diff" ]); then \
+	if ([ -n "$$CI" ] && [ -n "$$diff" ]); then \
 		echo "Generated files in public/css have changed, please commit the result:"; \
 		echo "$${diff}"; \
 		exit 1; \

public/css/index.css

@@ -803,6 +803,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .stats-table .table-cell{display:table-cell}
 .stats-table .table-cell.tiny{height:.5em}
 tbody.commit-list{vertical-align:baseline}
+.commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);display:inline-block;vertical-align:middle}
+.commit-list .message-wrapper .commit-status-link{display:inline-block;vertical-align:middle}
 .commit-body{white-space:pre-wrap}
 .git-notes.top{text-align:left}
 .git-notes .commit-body{margin:0}

public/less/_repository.less

@@ -2219,6 +2219,19 @@ tbody.commit-list {
     vertical-align: baseline;
 }
 
+.commit-list .message-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 24px);
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.commit-list .message-wrapper .commit-status-link {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .commit-body {
     white-space: pre-wrap;
 }

templates/repo/commit_status.tmpl

@@ -1,15 +1,15 @@
 {{if eq .State "pending"}}
-	<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
+	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
 {{end}}
 {{if eq .State "success"}}
-	<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
+	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
 {{end}}
 {{if eq .State "error"}}
-	<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
+	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
 {{end}}
 {{if eq .State "failure"}}
-	<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
+	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
 {{end}}
 {{if eq .State "warning"}}
-	<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
+	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
 {{end}}

templates/repo/commits_table.tmpl

@@ -47,9 +47,9 @@
 						<td class="author">
 							{{if .User}}
 							  {{if .User.FullName}}
-    							<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
+								<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
 							  {{else}}
-		    					<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
+								<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
 							  {{end}}
 							{{else}}
 								<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
@@ -69,12 +69,14 @@
 								{{end}}
 							</a>
 						</td>
-						<td class="message collapsing">
-							<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{.Summary}}</span>
-							{{if IsMultilineCommitMessage .Message}}
-							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
-							<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
-							{{end}}
+						<td class="message">
+							<span class="message-wrapper">
+								<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
+								{{if IsMultilineCommitMessage .Message}}
+								<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+								<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+								{{end}}
+							</span>
 							{{template "repo/commit_status" .Status}}
 						</td>
 						<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>

templates/repo/view_list.tmpl

@@ -1,4 +1,4 @@
-<table id="repo-files-table" class="ui single line table">
+<table id="repo-files-table" class="ui single line table fixed">
 	<thead>
 		<tr class="commit-list">
 			<th colspan="2">
@@ -27,12 +27,13 @@
 							</div>
 						{{end}}
 				</a>
-				<span class="grey has-emoji">{{.LatestCommit.Summary}}
+				{{template "repo/commit_status" .LatestCommitStatus}}
+				<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}">{{.LatestCommit.Summary}}
 				{{if IsMultilineCommitMessage .LatestCommit.Message}}
 					<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
 					<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 				{{end}}
-				{{template "repo/commit_status" .LatestCommitStatus}}</span>
+			    </span>
 			</th>
 			<th class="text grey right age">{{if .LatestCommit.Author}}{{TimeSince .LatestCommit.Author.When $.Lang}}{{end}}</th>
 		</tr>
@@ -82,7 +83,7 @@
 				{{end}}
 				<td class="message has-emoji">
 					<span class="truncate">
-						<a href="{{$.RepoLink}}/commit/{{$commit.ID}}">{{$commit.Summary}}</a>
+						<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary}}</a>
 					</span>
 				</td>
 				<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>