fix

Author: wxiaoguang

templates/repo/commit_statuses.tmpl

@@ -8,11 +8,7 @@
 			{{template "repo/commit_status" .Status}}
 		</span>
 	{{end}}
-	<div class="tippy-target ui relaxed list divided">
-		{{template "repo/pulls/status" (dict
-			"CommitStatuses" .Statuses
-			"CommitStatus" .Status
-			"IsPopup" true
-		)}}
+	<div class="tippy-target">
+		{{template "repo/pulls/status" (dict "CommitStatuses" .Statuses "CommitStatus" .Status)}}
 	</div>
 {{end}}

templates/repo/issue/view_content/pull.tmpl

@@ -20,11 +20,14 @@
 	{{- else if .Issue.PullRequest.CanAutoMerge}}green
 	{{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}</div>
 	<div class="content">
+		<div class="ui attached segment fitted">
 		{{template "repo/pulls/status" (dict
 			"CommitStatus" .LatestCommitStatus
 			"CommitStatuses" .LatestCommitStatuses
+			"ShowHideChecks" true
 			"is_context_required" .is_context_required
 		)}}
+		</div>
 		{{$showGeneralMergeForm := false}}
 		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
 			{{if .Issue.PullRequest.HasMerged}}

templates/repo/pulls/status.tmpl

@@ -2,13 +2,13 @@
 Template Attributes:
 * CommitStatus: summary of all commit status state
 * CommitStatuses: all commit status elements
-* IsPopup: whether this template is in a popup
+* ShowHideChecks: whether use a button to show/hide the checks
 * is_context_required: Used in pull request commit status check table
 */}}
 
 {{if .CommitStatus}}
-<div class="{{if .IsPopup}}tippy-commit-status{{else}}pr-commit-status{{end}}"{{if not .IsPopup}} data-toggled="true"{{end}}>
-	<div class="ui attached header top">
+<div class="commit-status-panel">
+	<div class="ui top attached header commit-status-header">
 		{{if eq .CommitStatus.State "pending"}}
 			{{ctx.Locale.Tr "repo.pulls.status_checking"}}
 		{{else if eq .CommitStatus.State "success"}}
@@ -23,19 +23,19 @@ Template Attributes:
 			{{ctx.Locale.Tr "repo.pulls.status_checking"}}
 		{{end}}
 
-		{{if not .IsPopup}}
+		{{if .ShowHideChecks}}
 		<div class="ui right">
-			<button class="hide-all-checks btn interact-fg"
+			<button class="commit-status-hide-checks btn interact-fg"
 			data-show-all="{{ctx.Locale.Tr "repo.pulls.status_checks_show_all"}}"
 			data-hide-all="{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}">
 			{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}</button>
 		</div>
 		{{end}}
 	</div>
 
-	<div class="ui attached segment commit-status-list">
+	<div class="commit-status-list">
 		{{range .CommitStatuses}}
-			<div class="ui attached segment commit-status-item">
+			<div class="commit-status-item">
 				{{template "repo/commit_status" .}}
 				<span class="status-context text truncate">{{.Context}} <span class="text light-2">{{.Description}}</span></span>
 				<div class="ui status-details">

web_src/css/repo.css

@@ -3074,40 +3074,23 @@ tbody.commit-list {
   }
 }
 
+.commit-status-header {
+  border: none !important; /* reset the default ".ui.attached.header" styles, to use the outer border */
+  margin: 0 !important;
+}
+
 .commit-status-list {
-  padding: 0 !important;
   max-height: 195px; /* fit exactly 4 items */
   overflow-x: hidden;
   transition: max-height .2s;
-  border-bottom: none !important;
-}
-
-.pr-commit-status[data-toggled="false"] .commit-status-list {
-  max-height: 0; /* hide it for the slide transition */
-}
-
-.pr-commit-status[data-toggled="false"] {
-  border-bottom: none !important;
-}
-
-.pr-commit-status[data-toggled="false"] .ui.attached.header {
-  transition-delay: .2s; /* hide border when transition ends */
-  border-bottom-width: 0 !important;
 }
 
 .commit-status-item {
   padding: 14px 10px !important;
   display: flex;
   gap: 8px;
   align-items: center;
-}
-
-.commit-status-item:first-child {
-  border-top: none !important;
-}
-
-.commit-status-item:last-child {
-  border-bottom: none !important;
+  border-top: 1px solid var(--color-secondary);
 }
 
 .commit-status-item .commit-status {
@@ -3140,10 +3123,6 @@ tbody.commit-list {
   padding-right: 0.5em; /* To match the alignment with the "required" label */
 }
 
-.tippy-commit-status .ui.attached.header {
-  border-top: 0 !important;
-}
-
 .search-fullname {
   color: var(--color-text-light-2);
 }

web_src/js/features/repo-issue-pr-status.js

@@ -1,11 +1,10 @@
 export function initRepoPullRequestCommitStatus() {
-  const btn = document.querySelector('.hide-all-checks');
-  if (!btn) return;
-
-  btn.addEventListener('click', () => {
-    const prCommitStatus = document.querySelector('.pr-commit-status');
-    const toggled = prCommitStatus.getAttribute('data-toggled') === 'true';
-    btn.textContent = btn.getAttribute(toggled ? 'data-hide-all' : 'data-show-all');
-    prCommitStatus.setAttribute('data-toggled', String(!toggled));
-  });
+  for (const btn of document.querySelectorAll('.commit-status-hide-checks')) {
+    btn.addEventListener('click', () => {
+      const panel = btn.closest('.commit-status-panel');
+      const list = panel.querySelector('.commit-status-list');
+      list.style.maxHeight = list.style.maxHeight ? '' : '0px';
+      btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all');
+    });
+  }
 }