From e52b1993f4e39da2b4b99cb37492cd8d98fbb644 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Wed, 2 Jul 2025 15:35:51 -0400
Subject: [PATCH] fx140: Work around grid layout bug in item box

And don't use hiddenDOMWindow, since it's no longer available on all
platforms.
---
 chrome/content/zotero/elements/editableText.js | 11 ++---------
 chrome/content/zotero/elements/itemBox.js      | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/chrome/content/zotero/elements/editableText.js b/chrome/content/zotero/elements/editableText.js
index cc7f078c8f..b5e6ef12f4 100644
--- a/chrome/content/zotero/elements/editableText.js
+++ b/chrome/content/zotero/elements/editableText.js
@@ -60,18 +60,11 @@
 		];
 		
 		static get _textMeasurementSpan() {
-			// Create our hidden span in the hiddenDOMWindow, because any calls to
-			// getBoundingClientRect(), offsetWidth, scrollWidth, etc. on an element
-			// in this document from sizeToContent() will, bizarrely, cause things
-			// in the metadata table to overlap
-			// TEMP: fx140: Use document
-			// TODO: Check if this bug is still present and restore hiddenDOMWindow if necessary
-			let doc = document; // Services.appShell.hiddenDOMWindow.document;
-			let span = doc.createElement('span');
+			let span = document.createElement('span');
 			span.style.position = 'absolute';
 			span.style.visibility = 'hidden';
 			span.style.whiteSpace = 'pre';
-			doc.documentElement.append(span);
+			document.documentElement.append(span);
 
 			window.addEventListener('unload', () => {
 				span.remove();
diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index ef8a718cf4..4413d23472 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/chrome/content/zotero/elements/itemBox.js
@@ -417,6 +417,23 @@
 
 			if (this._isAlreadyRendered()) return;
 			
+			try {
+				// Firefox's grid layout implementation has a bug that causes rows
+				// to overlap due to bad layout invalidation after some synchronous
+				// modifications of the DOM, like the ones made by editable-text's
+				// _getContentWidth() method.
+				// Build our table as a normal block element and then revert to
+				// grid layout at the end to force a single layout recalculation
+				// after everything is stable.
+				this._infoTable.style.display = 'block';
+				this._renderInternal();
+			}
+			finally {
+				this._infoTable.style.display = '';
+			}
+		}
+
+		_renderInternal() {
 			this._saveFieldFocus();
 
 			delete this._linkMenu.dataset.link;