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

2 files changed, 15 insertions, 0 deletions

diff --git a/public/css/index.css b/public/css/index.css
index d192f43d15..8f575fcd95 100644
--- a/public/css/index.css
+++ b/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}
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 71062bfa0e..acf8d7b870 100644
--- a/public/less/_repository.less
+++ b/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;
 }