From d00fc7ca221765972744afc03d9bab330a2d77f5 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Sat, 13 Jan 2024 10:16:08 +0800
Subject: [PATCH] Fix attachment box info table layout

---
 .../content/zotero/elements/attachmentBox.js  | 10 +--
 scss/abstracts/_mixins.scss                   | 86 +++++++++++++++++++
 scss/elements/_attachmentBox.scss             | 81 +++++------------
 scss/elements/_itemBox.scss                   | 85 +-----------------
 4 files changed, 115 insertions(+), 147 deletions(-)

diff --git a/chrome/content/zotero/elements/attachmentBox.js b/chrome/content/zotero/elements/attachmentBox.js
index a7b6c4df7e..f487edba69 100644
--- a/chrome/content/zotero/elements/attachmentBox.js
+++ b/chrome/content/zotero/elements/attachmentBox.js
@@ -37,23 +37,23 @@
 						ondragstart="let dt = event.dataTransfer; dt.setData('text/x-moz-url', this.value); dt.setData('text/uri-list', this.value); dt.setData('text/plain', this.value);"/>
 					<html:div class="metadata-table">
 						<html:div id="fileNameRow" class="meta-row">
-							<html:div class="meta-label"><label id="fileName-label" data-l10n-id="attachment-info-filename"/></html:div>
+							<html:div class="meta-label"><label id="fileName-label" class="key" data-l10n-id="attachment-info-filename"/></html:div>
 							<html:div class="meta-data"><editable-text id="fileName" nowrap="true" tight="true"/></html:div>
 						</html:div>
 						<html:div id="accessedRow" class="meta-row">
-							<html:div class="meta-label"><label id="accessed-label" data-l10n-id="attachment-info-accessed"/></html:div>
+							<html:div class="meta-label"><label id="accessed-label" class="key" data-l10n-id="attachment-info-accessed"/></html:div>
 							<html:div class="meta-data"><editable-text id="accessed" nowrap="true" tight="true" readonly="true"/></html:div>
 						</html:div>
 						<html:div id="pagesRow" class="meta-row">
-							<html:div class="meta-label"><label id="pages-label" data-l10n-id="attachment-info-pages"/></html:div>
+							<html:div class="meta-label"><label id="pages-label" class="key" data-l10n-id="attachment-info-pages"/></html:div>
 							<html:div class="meta-data"><editable-text id="pages" nowrap="true" tight="true" readonly="true"/></html:div>
 						</html:div>
 						<html:div id="dateModifiedRow" class="meta-row" hidden="true" >
-							<html:div class="meta-label"><label id="dateModified-label" data-l10n-id="attachment-info-modified"/></html:div>
+							<html:div class="meta-label"><label id="dateModified-label" class="key" data-l10n-id="attachment-info-modified"/></html:div>
 							<html:div class="meta-data"><editable-text id="dateModified" nowrap="true" tight="true" readonly="true"/></html:div>
 						</html:div>
 						<html:div id="indexStatusRow" class="meta-row">
-							<html:div class="meta-label"><label id="index-status-label" data-l10n-id="attachment-info-index"/></html:div>
+							<html:div class="meta-label"><label id="index-status-label" class="key" data-l10n-id="attachment-info-index"/></html:div>
 							<html:div class="meta-data">
 								<label id="index-status"/>
 								<toolbarbutton id="reindex" oncommand="this.hidden = true; setTimeout(function () { ZoteroPane_Local.reindexItem(); }, 50)"/>
diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index 6010833239..85ae7dfa8f 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -111,6 +111,92 @@
 	}
 }
 
+@mixin meta-table {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	column-gap: 10px;
+	row-gap: 2px;
+	width: inherit;
+
+	.show-on-hover {
+		visibility: hidden;
+		&.no-display {
+			display: none;
+		}
+	}
+
+	.meta-row {
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-column: span 2;
+
+		// On hover of the meta-row, reveal all hidden icons
+		// unless there's .noHover class which keeps everything hidden
+		&:not(.noHover):hover .show-on-hover,
+		&:focus-within .show-on-hover {
+			visibility: visible;
+			display: block;
+		}
+	
+		.meta-data {
+			width: 0;
+			min-width: 100%;
+			display: flex;
+			toolbarbutton {
+				margin-inline-start: 4px;
+			}
+	
+		}
+		editable-text {
+			flex: 1; // stretch value field as much as possible
+			max-width: 100%; // stay within .meta-data when the itemBox is narrow
+			.input {
+				// allow input to be shrunk by other elements when the itemBox is narrow
+				min-width: 0;
+			}
+			// keep multiline fields as tall as they have to be unless they're focused
+			&[multiline] textarea:not(:focus) {
+				min-height: 1em;
+			}
+		}
+	
+		.meta-label {
+			display: flex;
+			font-weight: normal;
+			text-align: end;
+			color: var(--fill-secondary);
+
+			&[fieldname^="creator"] {
+				justify-content: space-between;
+				align-items: center;
+			}
+			> label {
+				margin-top: 2px;
+				@include comfortable {
+					margin-top: 3px;
+				}
+			}
+		}
+		
+		.key {
+			width: 100%;
+		}
+	
+		toolbarbutton {
+			@include focus-ring;
+	
+			// needed to have the outline appear on all platforms
+			appearance: none;
+			-moz-appearance: none;
+			align-self: center;
+			// Make all buttons tigher to not stretch the rows
+			height: auto;
+			width: auto;
+			padding: 1px;
+			border-radius: 2px;
+		}
+	}
+}
 
 /* Hide icons on macOS. We use :is() to work around weird behavior in Fx101 where a regular child
    selector doesn't match the first time the menu is opened. */
diff --git a/scss/elements/_attachmentBox.scss b/scss/elements/_attachmentBox.scss
index dd4d5c70ca..2ad70fefdc 100644
--- a/scss/elements/_attachmentBox.scss
+++ b/scss/elements/_attachmentBox.scss
@@ -13,69 +13,30 @@ attachment-box {
 		}
 	}
 
+	.body {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
 	.metadata-table {
-		display: grid;
-		grid-template-columns: max-content 1fr;
-		column-gap: 10px;
-		row-gap: 2px;
-		width: inherit;
-		& > .meta-row {
-			display: grid;
-			grid-template-columns: subgrid;
-			grid-column: span 2;
-			padding-inline-start: 8px;
-			padding-inline-end: 8px;
+		@include meta-table;
 
-			&[hidden] {
-				display: none;
-			}
+		#index-status {
+			margin-inline: 0;
+			margin-block: 0;
+			height: 22px;
+			padding: 2px 4px;
+		}
 
-			& > .meta-label {
-				display: flex;
-				font-weight: normal;
-				text-align: end;
-
-				& > label {
-					color: var(--fill-secondary);
-					margin-top: 2px;
-					width: 100%;
-					@include comfortable {
-						margin-top: 3px;
-					}
-				}
-			}
-
-			& > .meta-data {
-				width: 0;
-				min-width: 100%;
-				display: flex;
-			}
-
-			editable-text {
-				flex: 1; // stretch value field as much as possible
-				max-width: 100%; // stay within .meta-data when the itemBox is narrow
-				.input {
-					// keep input within editable-text when the itemBox is narrow
-					width: calc(100% - 2*var(--editable-text-padding-inline) - 1px)
-				}
-			}
-
-			#index-status {
-				margin-inline: 0;
-				margin-block: 0;
-				height: 22px;
-				padding: 2px 4px;
-			}
-
-			#reindex
-			{
-				height: 22px;
-				width: 22px;
-				padding: 1px;
-				margin-left: 4px;
-				color: var(--fill-secondary);
-				@include svgicon-menu("sync", "universal", "20");
-			}
+		#reindex
+		{
+			height: 22px;
+			width: 22px;
+			padding: 1px;
+			margin-left: 4px;
+			color: var(--fill-secondary);
+			@include svgicon-menu("sync", "universal", "20");
 		}
 	}
 
diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss
index 8370e9380e..9d8fb3fccf 100644
--- a/scss/elements/_itemBox.scss
+++ b/scss/elements/_itemBox.scss
@@ -13,96 +13,16 @@ item-box {
 	}
 
 	#info-table {
-		display: grid;
-		grid-template-columns: max-content 1fr;
-		column-gap: 10px;
-		row-gap: 2px;
-		width: inherit;
-	}
-	
-	.meta-row {
-		display: grid;
-		grid-template-columns: subgrid;
-		grid-column: span 2;
-
-		.meta-data {
-			width: 0;
-			min-width: 100%;
-			display: flex;
-			toolbarbutton {
-				margin-inline-start: 4px;
-			}
-
-		}
-		editable-text {
-			flex: 1; // stretch value field as much as possible
-			max-width: 100%; // stay within .meta-data when the itemBox is narrow
-			.input {
-				// allow input to be shrunk by other elements when the itemBox is narrow
-				min-width: 0;
-			}
-			// keep multiline fields as tall as they have to be unless they're focused
-			&[multiline] textarea:not(:focus) {
-				min-height: 1em;
-			}
-		}
-
-		.meta-label {
-			display: flex;
-			font-weight: normal;
-			text-align: end;
-			&[fieldname^="creator"] {
-				justify-content: space-between;
-				align-items: center;
-			}
-			> label {
-				margin-top: 2px;
-				@include comfortable {
-					margin-top: 3px;
-				}
-			}
-		}
-		
-		.key {
-			width: 100%;
-		}
-
-		toolbarbutton {
-			@include focus-ring;
-
-			// needed to have the outline appear on all platforms
-			-moz-appearance: none;
-			align-self: center;
-			// Make all buttons tigher to not stretch the rows
-			height: auto;
-			width: auto;
-			padding: 1px;
-			border-radius: 2px;
-		}
+		@include meta-table;
 	}
 
-	.meta-label > label, .creator-type-label, #more-creators-label {
+	.creator-type-label, #more-creators-label {
 		color: var(--fill-secondary);
 	}
 
-	// All icons that are by default hidden
-	#info-table .show-on-hover {
-		visibility: hidden;
-		&.no-display {
-			display: none;
-		}
-	}
-
 	.drag-hidden-creator {
 		opacity: 0;
 	}
-	// On hover of the meta-row, reveal all hidden icons
-	// unless there's .noHover class which keeps everything hidden
-	#info-table .meta-row:not(.noHover):hover .show-on-hover,
-	#info-table .meta-row:focus-within .show-on-hover {
-        visibility: visible;
-		display: block;
-    }
 
 	#item-type-menu {
 		@include focus-ring;
@@ -269,6 +189,7 @@ item-box {
 		margin-top: 0;
 		margin-bottom: 1em;
 		cursor: text;
+		user-select: text;
 		-moz-user-select: text;
 	}