Item pane header customization (#3791)

scss/elements/_duplicatesMergePane.scss

@@ -1,20 +1,37 @@
 duplicates-merge-pane {
-	display: flex;
-	flex-direction: column;
-
-	groupbox {
-		margin: 8px 0 0 0;
-		min-height: 0;
+	&, #zotero-duplicates-merge-version-select, #zotero-duplicates-merge-item-box-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
 	}
 
-	#zotero-duplicates-merge-button
-	{
-		font-size: 13px;
+	padding-top: 9px;
+
+	> groupbox {
+		// Override default margin/padding that breaks our styles here
+		margin: 0;
+		padding: 0;
+		padding-inline: 8px;
+		min-height: 0;
+
+		> :is(description, label, button) {
+			margin: 0;
+		}
+	}
+
+	#zotero-duplicates-merge-field-select {
+		margin-bottom: 9px;
 	}
 
 	#zotero-duplicates-merge-item-box-container {
-		overflow-y: auto;
-		padding: 0 8px;
+		flex: 1;
+		padding-inline: 8px;
+		overflow-y: scroll;
+		border-top: var(--material-border-quinary);
+
+		collapsible-section > .head {
+			display: none;
+		}
 	}
 
 	/* Show duplicates date list item as selected even when not focused

scss/elements/_editableText.scss

@@ -1,11 +1,17 @@
 @include comfortable {
 	--editable-text-padding-inline: 4px;
 	--editable-text-padding-block: 4px;
+	
+	--editable-text-tight-padding-inline: 4px;
+	--editable-text-tight-padding-block: 2px;
 }
 
 @include compact {
 	--editable-text-padding-inline: 4px;
 	--editable-text-padding-block: 1px;
+	
+	--editable-text-tight-padding-inline: 3px;
+	--editable-text-tight-padding-block: 1px;
 }
 
 editable-text {
@@ -14,15 +20,8 @@ editable-text {
 	--max-visible-lines: 1;
 
 	&[tight] {
-		@include comfortable {
-			--editable-text-padding-inline: 4px;
-			--editable-text-padding-block: 2px;
-		}
-		
-		@include compact {
-			--editable-text-padding-inline: 3px;
-			--editable-text-padding-block: 1px;
-		}
+		--editable-text-padding-inline: var(--editable-text-tight-padding-inline);
+		--editable-text-padding-block: var(--editable-text-tight-padding-block);
 	}
 
 	// Fun auto-sizing approach from CSSTricks:

scss/elements/_itemBox.scss

@@ -14,6 +14,10 @@ item-box {
 
 	#info-table {
 		@include meta-table;
+		
+		.meta-row .zotero-field-version-button {
+			padding: 3px;
+		}
 	}
 
 	.creator-type-label, #more-creators-label {
@@ -169,12 +173,6 @@ item-box {
 		align-self: center;
 	}
 
-	/* Merge pane in duplicates view */
-	.zotero-field-version-button {
-		margin: 0;
-		padding: 0;
-	}
-
 	/*
 	 * Retraction box
 	 */

scss/elements/_paneHeader.scss

@@ -1,46 +1,44 @@
 pane-header {
-	display: flex;
+	&:not([hidden]) {
+		display: flex;
+	}
 	flex-direction: column;
-	align-items: flex-start;
-	padding: 6px 8px;
-	gap: 6px;
+	align-items: stretch;
+	padding: 8px;
 	border-bottom: 1px solid var(--fill-quinary);
 	
-	.head {
-		display: flex;
-		align-self: stretch;
-		gap: 4px;
+	max-height: 25%;
+	overflow-y: auto;
+	scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
+	scrollbar-gutter: stable;
+
+	.title {
+		margin-top: calc(0px - var(--editable-text-padding-block));
+		flex: 1 1 0;
+		font-weight: 600;
+		line-height: 1.333;
 		
-		.title {
-			align-self: center;
-			margin-top: calc(0px - var(--editable-text-padding-block));
-			padding: 2px 0px 1px 0px;
-			flex: 1 1 0;
-			font-weight: 600;
-			line-height: 1.333;
-			
-			editable-text {
-				flex: 1;
-			}
-		}
-		
-		.menu-button {
-			align-self: start;
-		}
-		
-		.menu-button toolbarbutton {
-			@include svgicon-menu("go-to", "universal", "20");
+		editable-text {
+			flex: 1;
 		}
 	}
 	
-	.menu-button {
-		align-self: start;
+	.creator-year {
+		color: var(--fill-secondary);
 	}
 	
-	.menu-button toolbarbutton {
-		@include svgicon-menu("go-to", "universal", "20");
-		--width-focus-border: 2px;
-		@include focus-ring;
+	.bib-entry {
+		line-height: 1.5;
+		
+		&.loading {
+			color: var(--fill-secondary);
+		}
+	}
+	
+	.creator-year, .bib-entry {
+		// Set padding to match editable-text in tight mode, plus 1px for border
+		padding-inline: calc(var(--editable-text-tight-padding-inline) + 1px);
+		overflow-wrap: anywhere;
 	}
 
 	.custom-head {

scss/preferences/_general.scss

@@ -18,6 +18,10 @@
 	height: 16px;
 }
 
+#item-pane-header-locale-menu {
+	min-width: 12em;
+}
+
 @media (-moz-platform: windows) {
 	button, menulist, radio, checkbox, input {
 		margin-block: 4px;