From c31df4ae6b3897b85af8d3e8aa854a6b2bfe6ab0 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Thu, 16 Jun 2022 16:27:16 -0500
Subject: [PATCH] fx-compat: Display item box using CSS grid

- Widths are now correct
- Rows are a little too tall
- Field value vertical alignment is off
- Platform styling isn't done and some styles might be redundant
- Still can't scroll vertically
- Creator name inputs still displayed wrong
---
 chrome/content/zotero/elements/itemBox.js |  2 +-
 chrome/skin/default/zotero/overlay.css    |  1 +
 scss/components/_itemBox.scss             | 39 +++++++++++++++++++----
 scss/mac/_itemBox.scss                    |  2 +-
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index 746e16bc25..773dfb64c9 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/chrome/content/zotero/elements/itemBox.js
@@ -445,7 +445,7 @@
 			}
 			if (this.showTypeMenu) {
 				this.updateItemTypeMenuSelection();
-				this.itemTypeMenu.parentNode.parentNode.style.display = 'table-row';
+				this.itemTypeMenu.parentNode.parentNode.style.display = 'contents';
 				this.itemTypeMenu.setAttribute('ztabindex', '0');
 			}
 			else {
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 33644b2609..600b44ffd4 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -647,6 +647,7 @@
 
 #item-box-container {
 	display: flex;
+	min-width: 0;
 }
 
 #retracted-items-banner, #sync-reminder-banner {
diff --git a/scss/components/_itemBox.scss b/scss/components/_itemBox.scss
index 0e3f9bbeb2..abc05e9d81 100644
--- a/scss/components/_itemBox.scss
+++ b/scss/components/_itemBox.scss
@@ -1,18 +1,40 @@
+:host {
+	display: flex;
+	min-width: 0;
+	width: 100%;
+}
+
 #item-box {
 	display: flex;
 	/*overflow: auto;*/
 	margin-top: 8px;
+	align-items: start;
+	width: 100%;
 }
 
-th, td {
-	min-height: 1em;
+#info-table {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	grid-auto-rows: minmax(1.8em, auto);
+	align-items: center;
+	width: 100%;
+}
+
+tr {
+	display: contents;
 }
 
 td {
 	display: flex;
+	min-width: 0;
+	align-self: stretch;
 }
 
-th > label, td > [fieldname] {
+td > input {
+	align-self: stretch;
+}
+
+th > label {
 	margin-top: 1px !important;
 	margin-bottom: 1px !important;
 	-moz-box-pack: start;
@@ -25,6 +47,12 @@ td > [fieldname] {
   width: 100%;
 }
 
+.value:not(.multiline) {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .value.multiline {
 	white-space: pre-line;
 }
@@ -35,11 +63,10 @@ td > [fieldname] {
 }*/
 
 #item-type-menu {
-	-moz-appearance: none;
 	height: 1.5em !important;
 	min-height: 1.5em !important;
-	padding: 0 0 0 2px !important;
-	margin: 1px 5px 0 1px !important;
+	padding: 0 !important;
+	margin: 0 5px 0 0 !important;
 	max-height: 1.5em !important;
 }
 
diff --git a/scss/mac/_itemBox.scss b/scss/mac/_itemBox.scss
index 7b7a1ab70f..714b82dc0e 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;
 }
 
-input {
+td > input {
 	margin: -1px 5px -1px 0;
 	padding: 0;
 }