Improve long tag fixer dialog

chrome/content/zotero/longTagFixer.js

@@ -125,8 +125,7 @@ var Zotero_Long_Tag_Fixer = new function () { // eslint-disable-line camelcase,
 		}
 
 		tags.forEach((tag) => {
-			const li = document.createElement('richlistitem');
+			const li = document.createXULElement('richlistitem');
-			const div = document.createElement('div');
 			const checkbox = document.createElement('input');
 			checkbox.type = 'checkbox';
 			checkbox.checked = true;
@@ -134,11 +133,9 @@ var Zotero_Long_Tag_Fixer = new function () { // eslint-disable-line camelcase,
 			const label = document.createElement('label');
 			label.setAttribute('for', 'tag-' + tag);
 			label.textContent = tag;
-			// Don't toggle checkbox for single-click on label
 			
-			div.appendChild(checkbox);
+			li.appendChild(checkbox);
-			div.appendChild(label);
+			li.appendChild(label);
-			li.appendChild(div);
 			this.listbox.append(li);
 		});
 		

chrome/content/zotero/longTagFixer.xhtml

@@ -8,13 +8,14 @@
 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml"
 	title="&zotero.sync.error;"
+	width="600"
 	onload="Zotero_Long_Tag_Fixer.init()">
 <dialog
 	id="zotero-long-tag-fixer"
 	buttons="cancel,accept"
 >	
 	<html:div id="intro">
-		<label value="&zotero.sync.longTagFixer.followingTagTooLong;"/>
+		<html:h1>&zotero.sync.longTagFixer.followingTagTooLong;</html:h1>
 		<html:textarea id="zotero-old-tag" readonly="readonly" />
 		<label>&zotero.sync.longTagFixer.syncedTagSizeLimit;</label>
 		<label value="&zotero.sync.longTagFixer.splitEditDelete;"/>		
@@ -37,10 +38,12 @@
 					<label id="delimiter-label"></label>
 				</hbox>
 				<richlistbox id="zotero-new-tag-list" class="tag-list" flex="1" tabindex="0" />
-				<label value="&zotero.sync.longTagFixer.uncheckedTagsNotSaved;"/>
+				<hbox class="select-actions">
-				<hbox>
+					<label value="&zotero.sync.longTagFixer.uncheckedTagsNotSaved;" />
-					<button label="&zotero.general.deselectAll;" oncommand="Zotero_Long_Tag_Fixer.deselectAll()"/>
+					<div>
-					<button label="&zotero.general.selectAll;" oncommand="Zotero_Long_Tag_Fixer.selectAll()"/>
+						<button label="&zotero.general.deselectAll;" oncommand="Zotero_Long_Tag_Fixer.deselectAll()"/>
+						<button label="&zotero.general.selectAll;" oncommand="Zotero_Long_Tag_Fixer.selectAll()"/>
+					</div>
 				</hbox>
 			</vbox>
 			

scss/components/_longTagFixer.scss

@@ -1,5 +1,14 @@
 #zotero-long-tag-fixer {
-	min-width: 400px; // with intro disabled, dialog tends to get to narrow
+	padding: 20px;
+	font-size: 12px;
+	line-height: 1.333333333;
+
+	h1 {
+		font-size: 13px;
+		line-height: 1.38462;
+		font-weight: 400;
+		margin: 0;
+	}
 
 	tab {
 		display: none;
@@ -34,42 +43,38 @@
 		}
 
 		> textarea {
-			margin: 1em;
+			margin: 16px 0;
 			height: 50px;
 			border: none;
 			padding: .5em;
-			background: var(--material-background50);
+			background: var(--material-sidepane);
 			appearance: none;
 			outline: none;
 		}
 	}
 
 	#zotero-new-tag-actions {
-		margin-top: 1em;
+		margin: 20px 0;
 	}
 
 	.split-tab {
 		.tag-list {
 			height: calc(8 * (1em + 10px));
 			overflow-x: hidden;
-			overflow-y: scroll;
+			padding: 8px;
 
 			> richlistitem {
-				display: block;
 				height: calc(1em + 10px);
-				overflow: hidden;
+				border-radius: 5px;
-			}
-
-			div {
-				display: flex;
-				align-items: center;
-			}
-
-			label  {
-				// width of the label is set to the width of the viewport minus sum of widths of
-				// paddings, margins and a checkbox to produce ellipsis truncation.
-				width: calc(100vw - 100px); 
 				@include text-truncate;
+
+				label {
+					line-height: calc(1em + 10px);
+				}
+			}
+
+			input[type="checkbox"] {
+				margin: 0 6px 0 0;
 			}
 		}
 
@@ -92,6 +97,7 @@
 		flex-direction: column;
 
 		#zotero-new-tag-editor {
+			padding: 8px;
 			flex: 1 1 auto;
 		}
 
@@ -105,6 +111,12 @@
 		color: var(--accent-red);
 	}
 
+	.select-actions {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
 	#zotero-new-tag-character-count {
 		font-weight: 600;
 		margin-right: 0;