From 6836bde33989447341a092bf83d254d0851c0340 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Thu, 11 Jan 2024 01:46:10 -0500
Subject: [PATCH] Fix RTL layout issues in item tree

---
 chrome/content/zotero/itemTree.jsx      | 16 +++++++++++++---
 scss/components/_item-tree.scss         | 16 +++++++++++++---
 scss/components/_virtualized-table.scss |  5 ++---
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/chrome/content/zotero/itemTree.jsx b/chrome/content/zotero/itemTree.jsx
index 243cdc6aa7..71fd3e5bf0 100644
--- a/chrome/content/zotero/itemTree.jsx
+++ b/chrome/content/zotero/itemTree.jsx
@@ -2691,15 +2691,25 @@ var ItemTree = class ItemTree extends LibraryTree {
 		}
 
 		let tagAriaLabel = '';
-		let tagSpans = '';
+		let tagSpans = [];
 		let coloredTags = item.getColoredTags();
 		if (coloredTags.length) {
 			let { emoji, colored } = coloredTags.reduce((acc, tag) => {
 				acc[Zotero.Utilities.Internal.isOnlyEmoji(tag.tag) ? 'emoji' : 'colored'].push(tag);
 				return acc;
 			}, { emoji: [], colored: [] });
-			tagSpans = [...emoji, ...colored].map(x => this._getTagSwatch(x.tag, x.color));
-			tagAriaLabel = tagSpans.length == 1 ? Zotero.getString('searchConditions.tag') : Zotero.getString('itemFields.tags');
+			
+			tagSpans.push(...emoji.map(x => this._getTagSwatch(x.tag)));
+			
+			if (colored.length) {
+				let coloredTagSpans = colored.map(x => this._getTagSwatch(x.tag, x.color));
+				let coloredTagSpanWrapper = document.createElement('span');
+				coloredTagSpanWrapper.className = 'colored-tag-swatches';
+				coloredTagSpanWrapper.append(...coloredTagSpans);
+				tagSpans.push(coloredTagSpanWrapper);
+			}
+
+			tagAriaLabel = coloredTags.length == 1 ? Zotero.getString('searchConditions.tag') : Zotero.getString('itemFields.tags');
 			tagAriaLabel += ' ' + coloredTags.map(x => x.tag).join(', ') + '.';
 		}
 
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index 8f640da3a5..b4a52fb329 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -8,8 +8,8 @@
 
 	.virtualized-table-header {
 		width: 100%;
-		padding-left: 8px;
-		padding-right: calc(8px + var(--scrollbar-width, 0px));
+		padding-inline-start: 8px;
+		padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
 		box-sizing: border-box;
 
 		.first-column {
@@ -77,12 +77,22 @@
 				}
 			}
 			
+			.colored-tag-swatches {
+				direction: ltr;
+				transform: scaleX(-1);
+			}
+			
 			.tag-swatch {
 				display: inline-block;
 
 				&.emoji + .emoji,
-				&.emoji + .colored {
+				&.emoji + .colored-tag-swatches {
 					margin-left: 4px;
+					
+					:root:-moz-locale-dir(rtl) & {
+						margin-left: 0;
+						margin-right: 4px;
+					}
 				}
 
 				&.colored {
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index e62fdfb53c..f10f0ccf8c 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -75,12 +75,11 @@
 				margin-inline-end: 0;
 			}
 
-			// Put the margin on the other side if the directionality of the
+			// Add margin on the end side if the directionality of the
 			// .cell-text is the opposite of that of the table
 			&:dir(ltr) .cell-text:dir(rtl),
 			&:dir(rtl) .cell-text:dir(ltr) {
-				margin-inline-start: 0;
-				margin-inline-end: 6px;
+				margin-inline-end: 5px;
 			}
 
 			&:dir(ltr) .cell-text {