Fix header columns being misaligned with table columns in item tree

And reindent _virtualized-table.scss

chrome/content/zotero/components/virtualized-table.jsx

@@ -1083,7 +1083,10 @@ class VirtualizedTable extends React.Component {
 		const header = document.querySelector(`#${this.props.id} .virtualized-table-header`);
 		const scrollbarWidth = Math.max(0,
 			tree.getBoundingClientRect().width - jsWindow.getBoundingClientRect().width);
-		header.style.width = `calc(100% - ${scrollbarWidth}px)`;
+		// Should be kept up to date with the _virtualized-table.scss value
+		// for .virtualized-table-header
+		const paddingInlineStart = 6;
+		header.style.width = `calc(100% - ${scrollbarWidth+paddingInlineStart}px)`;
 	}
 
 	/**

scss/components/_virtualized-table.scss

@@ -11,6 +11,7 @@
 	display: flex;
 	height: 0;
 	flex-direction: column;
+
 	> div {
 		display: flex;
 		flex: 1;
@@ -32,6 +33,7 @@
 
 	&.resizing {
 		cursor: col-resize;
+
 		.cell {
 			cursor: col-resize;
 		}
@@ -80,6 +82,7 @@
 		&.drop {
 			color: $shade-0 !important;
 			background: $shade-5 !important;
+
 			* {
 				pointer-events: none !important;
 			}
@@ -92,9 +95,11 @@
 			background-color: $shade-5;
 			pointer-events: none;
 		}
+
 		span.drop-before {
 			top: 0;
 		}
+
 		span.drop-after {
 			bottom: -1px;
 		}
@@ -137,6 +142,7 @@
 	height: 2em;
 	overflow: hidden;
 	border-inline-end: 1px solid #ddd;
+	padding-inline-start: 6px;
 
 	&.static-columns {
 		pointer-events: none;
@@ -176,10 +182,15 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
+		&:first-child .label {
+			margin-inline-start: 4px;
+		}
+
 		&.cell-icon {
 			> .label {
 				margin-inline-start: 0;
 			}
+
 			justify-content: center;
 		}
 
@@ -213,6 +224,7 @@
 		min-height: 90%;
 	}
 }
+
 .spacer-twisty {
 	display: inline-block;
 	min-width: 8px;
@@ -240,11 +252,13 @@
 			left: 10px;
 			right: initial;
 		}
+
 		.resizer {
 			right: -5px;
 			left: initial;
 		}
 	}
+
 	.twisty svg {
 		transform: rotate(90deg);
 	}