Fix the overflow style for "Hide all checks" (#27932)

Fix #27928

---------

Co-authored-by: silverwind <me@silverwind.io>

3 files changed, 13 insertions, 6 deletions

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 45feab7574..d65ecc89fb 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -60,6 +60,7 @@
 
 .tippy-box[data-theme="box-with-header"] .tippy-content {
   background: var(--color-box-body);
+  border-radius: var(--border-radius);
   padding: 0;
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index e4995d4229..40f08f412f 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -3075,21 +3075,29 @@ tbody.commit-list {
 }
 
 .commit-status-header {
-  border: none !important; /* reset the default ".ui.attached.header" styles, to use the outer border */
-  margin: 0 !important;
+  /* reset the default ".ui.attached.header" styles, to use the outer border */
+  border: none !important;
+  /* add a bottom border to make sure the there is always a divider between the header and list when the list is scrolling */
+  border-bottom: 1px solid var(--color-secondary) !important;
+  /* use negative margin to avoid the newly added border conflict with the list's top border */
+  margin: 0 0 -1px !important;
 }
 
 .commit-status-list {
-  max-height: 195px; /* fit exactly 4 items */
+  max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */
   overflow-x: hidden;
   transition: max-height .2s;
 }
 
 .commit-status-item {
-  padding: 14px 10px !important;
+  height: 40px;
+  padding: 0 10px;
   display: flex;
   gap: 8px;
   align-items: center;
+}
+
+.commit-status-item + .commit-status-item {
   border-top: 1px solid var(--color-secondary);
 }
 
diff --git a/web_src/js/features/repo-issue-pr-status.js b/web_src/js/features/repo-issue-pr-status.js
index 3010615706..7890b9c48d 100644
--- a/web_src/js/features/repo-issue-pr-status.js
+++ b/web_src/js/features/repo-issue-pr-status.js
@@ -4,9 +4,7 @@ export function initRepoPullRequestCommitStatus() {
     const list = panel.querySelector('.commit-status-list');
     btn.addEventListener('click', () => {
       list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle
-      list.style.overflow = 'hidden'; // hide scrollbar when hiding
       btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all');
     });
-    list.addEventListener('animationend', () => list.style.overflow = '');
   }
 }