From de0907c8f7edff892f3b08585d3b58487319e3ff Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Mon, 5 May 2025 14:00:53 +0200
Subject: [PATCH] Fix issues with flexbox width calculations (#5254)

Issues caused by differing padding values between the header cell and the table body cell
---
 .../zotero/components/virtualized-table.jsx   |  1 +
 scss/components/_item-tree.scss               |  6 -----
 scss/components/_virtualized-table.scss       | 22 ++++++++++++++-----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/chrome/content/zotero/components/virtualized-table.jsx b/chrome/content/zotero/components/virtualized-table.jsx
index fb09e6c964..da00968d5d 100644
--- a/chrome/content/zotero/components/virtualized-table.jsx
+++ b/chrome/content/zotero/components/virtualized-table.jsx
@@ -1088,6 +1088,7 @@ class VirtualizedTable extends React.Component {
 	
 		this._setXulTooltip();
 
+		this._topDiv.style.setProperty("--firstColumnExtraWidth", `${this.props.firstColumnExtraWidth || 0}px`);
 		window.addEventListener("resize", () => {
 			this._debouncedRerender();
 		});
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index e4d428050f..a6c56ba007 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -30,15 +30,9 @@
 		.cell.numNotes {
 			padding: 0;
 			text-align: center;
-
-			&.first-column {
-				padding-inline-start: 32px;
-			}
 		}
 
 		.first-column {
-			padding-inline-start: 36px;
-
 			&::before {
 				content: "";
 				display: inline-block;
diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss
index 414e0cd1ab..aa620a620f 100644
--- a/scss/components/_virtualized-table.scss
+++ b/scss/components/_virtualized-table.scss
@@ -40,7 +40,10 @@
 	}
 	
 	.cell {
-		padding: 0 8px;
+		// NOTE: To avoid the complexities of dealing with padding in the
+		// flexbox model, `.cell` padding must be identical in the header and
+		// body. See #5198, #5162.
+		padding: 0 8px; 
 		min-width: 30px;
 		cursor: default;
 		white-space: nowrap;
@@ -52,6 +55,11 @@
 			padding-inline-end: 4px;
 		}
 
+		&.first-column {
+			padding-inline-start: 0;
+			min-width: calc(var(--firstColumnExtraWidth, 0px) + 30px);
+		}
+
 		&.first-column,
 		&.primary {
 			display: flex;
@@ -278,6 +286,13 @@
 		text-align: center;
 	}
 
+	.first-column {
+		> :first-child {
+			// offset header's column label/icon to align with the text in the first column, without introducing padding to the cell itself to avoid flexbox issues
+			padding-inline-start: calc(var(--firstColumnExtraWidth, 0px) + 8px);
+		}
+	}
+
 	.cell {
 		display: flex;
 		position: relative;
@@ -352,6 +367,7 @@
 	padding: 4px 8px 8px;
 
 	.cell {
+		// NOTE: Do not add padding here. See #5198
 		text-overflow: ellipsis;
 		overflow: hidden;
 		max-height: 100%;
@@ -361,10 +377,6 @@
 		// pointer-events are enabled, and we need to rerender the rows for selection
 		// before dragging.
 		pointer-events: none;
-
-		&.first-column {
-			padding-inline-start: 0;
-		}
 	}
 }