From 85a15175aecd5e6ab8ae74c09049a6dd680f6ac3 Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Sat, 8 Jun 2024 04:38:39 -0400
Subject: [PATCH] Fix sizing problems in Create Parent dialog

Use a regular paragraph for the intro text rather than an input
placeholder, which gets cut off it's too long, and allow the window to
be sized dynamically based on the title and localized strings.

Fixes #4109
---
 .../zotero/components/createParent/createParent.jsx |  6 +++---
 chrome/content/zotero/createParentDialog.xhtml      |  6 ++++--
 chrome/locale/en-US/zotero/zotero.ftl               |  2 ++
 chrome/locale/en-US/zotero/zotero.properties        |  2 --
 scss/components/_createParent.scss                  | 13 +++++++++++--
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/chrome/content/zotero/components/createParent/createParent.jsx b/chrome/content/zotero/components/createParent/createParent.jsx
index 606ca70915..fe68219fc3 100644
--- a/chrome/content/zotero/components/createParent/createParent.jsx
+++ b/chrome/content/zotero/components/createParent/createParent.jsx
@@ -43,13 +43,13 @@ function CreateParent({ loading, item, toggleAccept }) {
 
 	return (
 		<div className="create-parent-container">
-			<span className="title">
+			<div className="title">
 				{ item.attachmentFilename }
-			</span>
+			</div>
+			<p className="intro" data-l10n-id="create-parent-intro"/>
 			<div className="body">
 				<input
 					id="parent-item-identifier"
-					placeholder={ Zotero.getString('createParent.prompt') }
 					size="50"
 					disabled={ loading }
 					onChange={ handleInput }
diff --git a/chrome/content/zotero/createParentDialog.xhtml b/chrome/content/zotero/createParentDialog.xhtml
index 61fec135cb..9c1856a193 100644
--- a/chrome/content/zotero/createParentDialog.xhtml
+++ b/chrome/content/zotero/createParentDialog.xhtml
@@ -23,7 +23,7 @@
 	buttondisabledaccept="true"
 	buttonlabelextra2="&zotero.createParent.button.manual;"
 	buttonlabelaccept="&zotero.createParent.title;"
-	style="padding:20px 15px;width:400px;">
+	style="padding: 20px 15px; min-width: 500px">
 
 	<script src="chrome://global/content/globalOverlay.js"/>
 	<script src="chrome://global/content/editMenuOverlay.js"/>
@@ -33,7 +33,9 @@
 	<script src="lookup.js"/>
 	<script src="createParentDialog.js"/>
 	<script src="components/createParent/createParent.js"/>
-
+	
+	<html:link rel="localization" href="zotero.ftl"/>
+	
 	<vbox id="zotero-create-parent-container" flex="1">
 		<html:div id="create-parent" />
 	</vbox>
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index d49986251e..0b67f5697b 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -126,6 +126,8 @@ itembox-button-options =
 itembox-button-merge =
     .aria-label = Select version of { $field } field
 
+create-parent-intro = Enter a DOI, ISBN, PMID, arXiv ID, or ADS Bibcode to identify this file:
+
 reader-use-dark-mode-for-content =
     .label = Use Dark Mode for Content
 
diff --git a/chrome/locale/en-US/zotero/zotero.properties b/chrome/locale/en-US/zotero/zotero.properties
index 4992893330..e732b0e637 100644
--- a/chrome/locale/en-US/zotero/zotero.properties
+++ b/chrome/locale/en-US/zotero/zotero.properties
@@ -1221,8 +1221,6 @@ lookup.failure.description			= Zotero could not find a record for the specified
 lookup.failureToID.description		= Zotero could not find any identifiers in your input. Please verify your input and try again.
 lookup.failureTooMany.description	= Too many identifiers. Please enter one identifier and try again.
 
-createParent.prompt					= Enter a DOI, ISBN, PMID, arXiv ID, or ADS Bibcode to identify this file
-
 locate.online.label					= View Online
 locate.pdf.label					= Open PDF
 locate.pdfNewWindow.label			= Open PDF in New Window
diff --git a/scss/components/_createParent.scss b/scss/components/_createParent.scss
index aa2673df6e..b21df9be12 100644
--- a/scss/components/_createParent.scss
+++ b/scss/components/_createParent.scss
@@ -2,16 +2,25 @@
 	.title {
 		font-size: 1.4em;
 		font-weight: 700;
+		// Let the dialog get a little wider if the title is long
+		max-width: 550px;
 	}
-
+	
+	.intro {
+		// Text is added asynchonously, so set a height for dialog auto-sizing
+		min-height: 1em;
+		margin-bottom: .5em;
+	}
+	
 	.body {
-		margin: 1em 0;
 		position: relative;
 		display: flex;
+		margin-bottom: 1em;
 
 		input {
 			flex: 1;
 			font-size: 14px;
+			margin-left: 0;
 		}
 		
 		.downloadProgress {