From aea13031199ba9e883517a1300a7e55e4493b1cc Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Tue, 4 Apr 2023 14:23:40 -0400
Subject: [PATCH] fx-compat: Item box: Fix field sizing on all platforms

Layout should no longer shift when editing creators or fields.
(Linux untested.)
---
 scss/elements/_itemBox.scss       | 26 +++++++++++++++++++++-----
 scss/linux/elements/_itemBox.scss | 15 ---------------
 scss/mac/elements/_itemBox.scss   |  8 --------
 3 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss
index fc7ac157e2..6f1aad72b7 100644
--- a/scss/elements/_itemBox.scss
+++ b/scss/elements/_itemBox.scss
@@ -1,4 +1,6 @@
 item-box {
+	--row-height: 1.5em;
+	
 	display: flex;
 	min-width: 0;
 	width: 100%;
@@ -14,7 +16,9 @@ item-box {
 	#info-table {
 		display: grid;
 		grid-template-columns: max-content 1fr;
-		grid-auto-rows: min-content;
+		// Make sure rows are at least --row-height tall, but no taller than their tallest child
+		// This lets rows expand for multi-line editors
+		grid-auto-rows: minmax(var(--row-height), max-content);
 		align-items: center;
 		width: 100%;
 	}
@@ -31,8 +35,17 @@ item-box {
 		margin-inline-end: 5px;
 	}
 
+	td > input, .creator-name-box > input {
+		align-self: center;
+		// Fields have 3px borders; cancel them out
+		margin-top: -3px;
+		margin-bottom: -3px;
+		margin-inline-start: 0;
+		padding: 0;
+	}
+	
 	td > input {
-		align-self: stretch;
+		margin-inline-end: 5px;
 	}
 
 	th > label {
@@ -119,9 +132,12 @@ item-box {
 
 	/* metadata field names */
 	th {
-		align-self: stretch;
+		display: flex;
+		height: var(--row-height);
+		align-self: start;
+		align-items: center;
+		justify-content: end;
 		font-weight: normal;
-		text-align: right;
 		margin-inline-start: 5px !important;
 		margin-inline-end: 2px !important;
 	}
@@ -301,4 +317,4 @@ item-box {
 		text-decoration: underline;
 		border-style: none;
 	}
-}
\ No newline at end of file
+}
diff --git a/scss/linux/elements/_itemBox.scss b/scss/linux/elements/_itemBox.scss
index 4a2c5736f6..eac9e05f3c 100644
--- a/scss/linux/elements/_itemBox.scss
+++ b/scss/linux/elements/_itemBox.scss
@@ -1,20 +1,5 @@
 item-box {
-	th {
-		margin-top: 1px;
-	}
-
 	.zotero-clicky {
 		min-height: 17px;
 	}
-
-	td input {
-		margin: -2px 0 0;
-		padding: 1px;
-		border-width: 1px;
-		border-radius: 6px;
-	}
-	
-	.creator-name-box input {
-		margin-bottom: -1px;
-	}
 }
diff --git a/scss/mac/elements/_itemBox.scss b/scss/mac/elements/_itemBox.scss
index d4af3fd467..ca06431c25 100644
--- a/scss/mac/elements/_itemBox.scss
+++ b/scss/mac/elements/_itemBox.scss
@@ -24,14 +24,6 @@ item-box {
 		max-width: 7px;
 		max-height: 7px;
 	}
-	
-	td > input {
-		margin-top: -1px;
-		margin-bottom: -2.5px;
-		margin-inline-start: 0;
-		margin-inline-end: 5px;
-		padding: 0;
-	}
 }
 
 /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */