Fix hidden commit status on multiple checks (#22889)

Since #22632, when a commit status has multiple checks, no check is
shown at all (hence no way to see the other checks).

This PR fixes this by always adding a tag with the
`.commit-statuses-trigger` to the DOM (the `.vm` is for vertical
alignment).

![2023-02-13-120528](https://user-images.githubusercontent.com/3864879/218441846-1a79c169-2efd-46bb-9e75-d8b45d7cc8e3.png)

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

3 files changed, 2 insertions, 27 deletions

diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js
index e2eef3ee5..d22aa8e98 100644
--- a/web_src/js/features/repo-commit.js
+++ b/web_src/js/features/repo-commit.js
@@ -58,7 +58,7 @@ export function initRepoCommitLastCommitLoader() {
 }
 
 export function initCommitStatuses() {
-  $('.commit-statuses-trigger').each(function () {
+  $('[data-tippy="commit-statuses"]').each(function () {
     const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
 
     createTippy(this, {
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index fae29d0d6..fc04df4f9 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -340,8 +340,7 @@ a.label,
 .ui.search .results a,
 .ui .menu a,
 .ui.cards a.card,
-.issue-keyword a,
-a.commit-statuses-trigger {
+.issue-keyword a {
   text-decoration: none !important;
 }
 
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f48933571..3bec5f58f 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1,28 +1,4 @@
 .repository {
-  .popup.commit-statuses {
-    // we had better limit the max size of the popup, and add scroll bars if the content size is too large.
-    // otherwise some part of the popup will be hidden by viewport boundary
-    max-height: 45vh;
-    max-width: 60vw;
-
-    &.ui.right {
-      // Override `.ui.attached.header .right:not(.dropdown) height: 30px;` which would otherwise lead to
-      // the status popup box having its height fixed at 30px. See https://github.com/go-gitea/gitea/issues/18498
-      height: auto;
-    }
-
-    overflow: auto;
-    padding: 0;
-
-    .list {
-      padding: .8em; // to make the scrollbar align to the border, we move the padding from outer `.popup` to this inside `.list`
-
-      > .item {
-        line-height: 2;
-      }
-    }
-  }
-
   .repo-header {
     .ui.compact.menu {
       margin-left: 1rem;