From 2b2eb5d0ad0a632573da762a151ddae23c5b2e4a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 28 Oct 2021 09:34:18 +0800
Subject: [PATCH] make commit-statuses popup can be shown correctly. (#17447)

Close #17443

Maybe we do not need to backport this PR, the bug doesn't break daily usage.

After the fix, the commit statuses popup can show a lot of lines with scroll bars:

![image](https://user-images.githubusercontent.com/2114189/139026160-f01b484c-6207-494a-a190-a6dd184ceb2b.png)
---
 web_src/js/features/repo-legacy.js |  5 ++++-
 web_src/less/_repository.less      | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 2e98a7183e..6692d1902c 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -267,10 +267,13 @@ export async function initRepository() {
 
   // Commit statuses
   $('.commit-statuses-trigger').each(function () {
+    const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
+    const popupPosition = positionRight ? 'right center' : 'left center';
     $(this)
       .popup({
         on: 'click',
-        position: ($('.repository.file.list').length > 0 ? 'right center' : 'left center'),
+        lastResort: popupPosition, // prevent error message "Popup does not fit within the boundaries of the viewport"
+        position: popupPosition,
       });
   });
 
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index ccc2dcf69c..ffec4043b5 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1,6 +1,19 @@
 .repository {
-  .commit-statuses .list > .item {
-    line-height: 2;
+  .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;
+    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 {