From 166422fb6e577d08ddb5f937495bb41af259b441 Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Tue, 2 Apr 2024 16:28:45 +0200
Subject: [PATCH] fix: align header structure with list row

In order to avoid inconsistencies in the layout.
---
 frappe/public/js/frappe/list/list_view.js | 12 ++++++++----
 frappe/public/scss/desk/list.scss         | 24 +++++++----------------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js
index 1c8ebefe3b..bded3c9aa1 100644
--- a/frappe/public/js/frappe/list/list_view.js
+++ b/frappe/public/js/frappe/list/list_view.js
@@ -654,8 +654,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 		const subject_field = this.columns[0].df;
 		let subject_html = `
-			<input class="level-item list-check-all" type="checkbox"
-				title="${__("Select All")}">
+			<span class="level-item select-like">
+				<input class="list-header-checkbox list-check-all" type="checkbox" title="${__("Select All")}">
+			</span>
 			<span class="level-item" data-sort-by="${subject_field.fieldname}"
 				title="${__("Click to sort by {0}", [subject_field.label])}">
 				${__(subject_field.label)}
@@ -700,14 +701,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 	get_header_html_skeleton(left = "", right = "") {
 		return `
+		<div class="list-row-container">
 			<header class="level list-row-head text-muted">
 				<div class="level-left list-header-subject">
 					${left}
 				</div>
 				<div class="level-left checkbox-actions">
 					<div class="level list-subject">
-						<input class="level-item list-check-all" type="checkbox"
-							title="${__("Select All")}">
+						<span class="level-item select-like">
+							<input class="list-header-checkbox list-check-all" type="checkbox" title="${__("Select All")}">
+						</span>
 						<span class="level-item list-header-meta"></span>
 					</div>
 				</div>
@@ -715,6 +718,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 					${right}
 				</div>
 			</header>
+		</div>
 		`;
 	}
 
diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss
index b9fc687386..73d1c82258 100644
--- a/frappe/public/scss/desk/list.scss
+++ b/frappe/public/scss/desk/list.scss
@@ -160,11 +160,11 @@
 	.file-select {
 		padding-left: 11px;
 	}
+}
 
-	.select-like {
-		padding: var(--list-checkbox-padding);
-		cursor: default;
-	}
+.select-like {
+	padding: var(--list-checkbox-padding);
+	cursor: default;
 }
 
 .list-row-head {
@@ -172,12 +172,9 @@
 	cursor: default;
 	background-color: var(--subtle-fg);
 	height: 30px;
-	margin: 0.5rem var(--padding-xs);
+	margin: 0.5rem 0;
 	border-radius: var(--border-radius-md);
 
-	.list-check-all {
-		margin-left: 11px;
-	}
 	.list-subject {
 		font-weight: normal;
 	}
@@ -252,21 +249,14 @@ $level-margin-right: 8px;
 	margin-bottom: 1px;
 }
 
-input.list-row-checkbox {
+input.list-row-checkbox,
+input.list-header-checkbox {
 	margin-top: 0;
 	margin-bottom: 0;
 	--checkbox-right-margin: 0;
 	background-color: var(--card-bg);
 }
 
-input.list-check-all {
-	margin-left: 15px;
-	margin-top: 0;
-	margin-bottom: 0;
-	--checkbox-right-margin: var(--list-checkbox-padding);
-	background-color: var(--card-bg);
-}
-
 .render-list-checkbox {
 	margin-left: 15px;
 }