From a9eb79a45b50a1f36815643fd0d567564c95355c Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Fri, 5 Jan 2024 02:04:37 +0100
Subject: [PATCH] Extend hover/drag color to the edges of the items header

---
 .../zotero/components/virtualized-table.jsx   |  5 +--
 scss/components/_item-tree.scss               | 44 ++++++++++++++++++-
 scss/components/_virtualized-table.scss       | 18 +-------
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/chrome/content/zotero/components/virtualized-table.jsx b/chrome/content/zotero/components/virtualized-table.jsx
index 701f077e1d..b639a64a20 100644
--- a/chrome/content/zotero/components/virtualized-table.jsx
+++ b/chrome/content/zotero/components/virtualized-table.jsx
@@ -1329,9 +1329,8 @@ class VirtualizedTable extends React.Component {
 		if (Zotero.isLinux) {
 			paddingWidth = 2; // from the border
 		}
-		// Should be kept up to date with the _virtualized-table.scss value
-		// for .virtualized-table-header
-		header.style.width = `calc(100% - ${scrollbarWidth - paddingWidth}px)`;
+
+		header.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
 	}
 
 	/**
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index fe450e6ec6..63413309c8 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -7,8 +7,50 @@
 	}
 
 	.virtualized-table-header {
-		padding: 0 8px;
+		width: 100%;
+		padding-left: 8px;
+		padding-right: calc(8px + var(--scrollbar-width, 0px));
 		box-sizing: border-box;
+
+		.first-column {
+			&::before {
+				content: "";
+				display: inline-block;
+				width: 8px;
+				height: 100%;
+				background: transparent;
+				position: absolute;
+				left: -8px;
+				
+				@include state(".first-column:hover") {
+					background: var(--material-mix-quinary);
+				}
+				
+				@include state(".first-column.dragging") {
+					background: var(--material-mix-quarternary);
+				}
+			}
+		}
+
+		.cell:last-child {
+			&::after {
+				content: "";
+				display: inline-block;
+				width: calc(var(--scrollbar-width, 0px) + 8px);
+				height: 100%;
+				background: transparent;
+				position: absolute;
+				right: calc(-1 * var(--scrollbar-width, 0px) - 8px);
+		
+				@include state(".cell:hover") {
+					background: var(--material-mix-quinary);
+				}
+
+				@include state(".cell.dragging") {
+					background: var(--material-mix-quarternary);
+				}
+			}
+		}
 	}
 	
 	.virtualized-table {
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index 0813b1f56b..7fdfcf98f6 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -226,6 +226,7 @@
 	background: var(--material-background);
 	height: 1.83333333em; // 22px @ 12px font size
 	overflow: hidden;
+	border-bottom: var(--material-border-quarternary);
 
 	@include comfortable {
 		height: 2.33333333em; // 28px @ 12px font size
@@ -236,23 +237,6 @@
 		pointer-events: none;
 	}
 
-	&::after {
-		content: "";
-		display: block;
-		border-bottom: var(--material-border-quarternary);
-		height: 1px;
-		width: 100%;
-		position: absolute;
-		top: calc(1.83333333em - 1px);
-		left: 0;
-		right: 0;
-		z-index: 1;
-
-		@include comfortable {
-			top: calc(2.33333333em - 1px);
-		}
-	}
-
 	.column-picker {
 		text-align: center;
 	}