From 6a855f5c8f1a64f7853e219d7bcee1c9ec7a2bc7 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Mon, 8 Jan 2024 17:32:06 +0100
Subject: [PATCH] Fix issues with item tree row drag image

* Attachment icon being cut off due to box-sizing issue
* Twisty icon incorrect using color
* Dragged image being slightly wider than the item in the tree
---
 scss/components/_item-tree.scss         |  4 ++--
 scss/components/_virtualized-table.scss | 32 ++++++++++++++++++-------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index 63413309c8..70e054cf6a 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -2,7 +2,7 @@
 
 #zotero-items-tree {
 
-	.virtualized-table-body {
+	.virtualized-table-body, .drag-image-container {
 		padding: 4px 8px;
 	}
 
@@ -53,7 +53,7 @@
 		}
 	}
 	
-	.virtualized-table {
+	.virtualized-table, .drag-image-container {
 		.row {
 			&.odd:not(.selected) {
 				background-color: var(--material-background);
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index 7fdfcf98f6..9226ea6bf1 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -175,14 +175,6 @@
 				box-sizing: border-box;
 				background: url("chrome://zotero/skin/8/universal/chevron-8.svg") content-box no-repeat;
 				-moz-context-properties: fill, fill-opacity;
-
-				@include focus-states using ($color) {
-					@if $color == "white" {
-						fill: var(--accent-white);
-					} @else {
-						fill: var(--fill-secondary);
-					}
-				}
 			}
 		}
 	}
@@ -345,3 +337,27 @@
 		transform: rotate(90deg);
 	}
 }
+
+.virtualized-table {
+	.row .twisty.icon-css {
+		@include focus-states using ($color) {
+			@if $color =="white" {
+				fill: var(--accent-white);
+			}
+
+			@else {
+				fill: var(--fill-secondary);
+			}
+		}
+	}
+}
+
+.drag-image-container {
+	box-sizing: border-box;
+
+	.row .twisty.icon-css {
+		@include focus-states('.row.selected', '.drag-image-container:focus-within') using ($color) {
+			fill: var(--fill-secondary);
+		}
+	}
+}