From 36e0c6469c9058cf63ebda0a7d1b5ab03cef8f80 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Tue, 1 Jul 2025 14:56:30 +0200
Subject: [PATCH] Fix truncated content in the Create Parent dialog. Close
 #5365

---
 .../zotero/components/createParent/createParent.jsx  | 12 +++++++++---
 scss/components/_createParent.scss                   |  1 +
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/chrome/content/zotero/components/createParent/createParent.jsx b/chrome/content/zotero/components/createParent/createParent.jsx
index 34460a406c..7e86611bce 100644
--- a/chrome/content/zotero/components/createParent/createParent.jsx
+++ b/chrome/content/zotero/components/createParent/createParent.jsx
@@ -25,14 +25,20 @@
 
 'use strict';
 
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 function CreateParent({ loading, item, toggleAccept }) {
 	// With React 18, this is required for the window's dialog to be properly sized
+	const ref = useRef();
 	useEffect(() => {
-		window.sizeToContent();
+		// Wait for Fluent to inject translated strings before resizing the dialog (fixes #5365).
+		const observer = new MutationObserver(() => window.sizeToContent());
+		observer.observe(ref.current, { childList: true, subtree: true });
+		return () => {
+			observer.disconnect();
+		};
 	}, []);
 
 	// When the input has/does not have characters toggle the accept button on the dialog
@@ -46,7 +52,7 @@ function CreateParent({ loading, item, toggleAccept }) {
 	};
 
 	return (
-		<div className="create-parent-container">
+		<div className="create-parent-container" ref={ ref }>
 			<div className="title">
 				{ item.attachmentFilename }
 			</div>
diff --git a/scss/components/_createParent.scss b/scss/components/_createParent.scss
index b21df9be12..1f110d39a4 100644
--- a/scss/components/_createParent.scss
+++ b/scss/components/_createParent.scss
@@ -10,6 +10,7 @@
 		// Text is added asynchonously, so set a height for dialog auto-sizing
 		min-height: 1em;
 		margin-bottom: .5em;
+		max-width: 500px; // Avoid expanding the dialog too wide; instead, in some languages, the intro text will wrap.
 	}
 	
 	.body {