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

@@ -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 {

chrome/skin/default/zotero/overlay.css

@@ -647,6 +647,7 @@
 
 #item-box-container {
 	display: flex;
+	min-width: 0;
 }
 
 #retracted-items-banner, #sync-reminder-banner {

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 {
+#info-table {
-	min-height: 1em;
+	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;
+	padding: 0 !important;
-	margin: 1px 5px 0 1px !important;
+	margin: 0 5px 0 0 !important;
 	max-height: 1.5em !important;
 }
 

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;
 }