From 808375d5e345e4f2df482811631d2d8f53fe7a1b Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Thu, 21 Jul 2022 16:12:28 -0400
Subject: [PATCH] fx-compat: Item box: Fix creator name field sizing

Not the exact same sizing as Fx60, because that relied on some quirks
of the Mozilla box model that I can't reproduce with flexbox, but still
works about as well.
---
 chrome/content/zotero/elements/itemBox.js |  1 -
 scss/components/_itemBox.scss             | 14 +++++++++++++-
 scss/mac/_itemBox.scss                    |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index 83fc0b9306..ae364e6d30 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/chrome/content/zotero/elements/itemBox.js
@@ -880,7 +880,6 @@
 			// Name
 			var firstlast = document.createElement("span");
 			firstlast.className = 'creator-name-box';
-			firstlast.setAttribute("flex","1");
 			var tabindex = this._tabIndexMinCreators + (rowIndex * 2);
 			var fieldName = 'creator-' + rowIndex + '-lastName';
 			var lastNameElem = firstlast.appendChild(
diff --git a/scss/components/_itemBox.scss b/scss/components/_itemBox.scss
index 670ba41ca8..b9ea3cab08 100644
--- a/scss/components/_itemBox.scss
+++ b/scss/components/_itemBox.scss
@@ -145,8 +145,20 @@ row label
 }
 
 .creator-name-box {
-	display: flex;
 	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: baseline;
+
+	& > input {
+		flex: 1;
+		width: 100%;
+	}
+
+	& > div {
+		flex-shrink: 1;
+		min-width: 10px;
+	}
 }
 
 .creator-type-label > label
diff --git a/scss/mac/_itemBox.scss b/scss/mac/_itemBox.scss
index 714b82dc0e..82fefacdd6 100644
--- a/scss/mac/_itemBox.scss
+++ b/scss/mac/_itemBox.scss
@@ -24,7 +24,7 @@ th > label, .creator-type-label, #more-creators-label {
 	max-height: 7px;
 }
 
-td > input {
+td > input, .creator-name-box > input {
 	margin: -1px 5px -1px 0;
 	padding: 0;
 }