From 10a6ebb3fd9e44ef044ec010b235ca2bf9b456b4 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Nov 2023 02:53:35 +0800 Subject: [PATCH] Fix the overflow style for "Hide all checks" (#27932) Fix #27928 --------- Co-authored-by: silverwind --- web_src/css/modules/tippy.css | 1 + web_src/css/repo.css | 16 ++++++++++++---- web_src/js/features/repo-issue-pr-status.js | 2 -- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 45feab757..d65ecc89f 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 e4995d422..40f08f412 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 301061570..7890b9c48 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 = ''); } }