From 4dbe0f7842187a0a6565fd698bb652a2ae24fbbe Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Tue, 24 Jun 2025 23:17:41 -0700
Subject: [PATCH] Citation dialog: fix broken item details popup with some
 non-english locales (#5354)

This allows the locator dropdown to be as wide as it wants
(depending on the longest option in the current locale),
with inputs occupying the remaining space. This is
a more flexible layout that avoids broken UI in
cases if <select> dropdown tries to become too wide
while <input>s occupy a fixed space to remain aligned.

Fixes: #5350
---
 .../zotero/integration/citationDialog.xhtml   | 29 +++++++++--------
 scss/components/_citationDialog.scss          | 31 +++++++------------
 2 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/chrome/content/zotero/integration/citationDialog.xhtml b/chrome/content/zotero/integration/citationDialog.xhtml
index 58fee6d474..959f7d2a80 100644
--- a/chrome/content/zotero/integration/citationDialog.xhtml
+++ b/chrome/content/zotero/integration/citationDialog.xhtml
@@ -108,23 +108,22 @@
 						</div>
 					</div>
 					<div class="details" role="group">
-							<div class="row">
-								<!--fx128: size="0" forces select have default native style -->
-								<select name="locator" id="label" class="details-label" size="0"></select>
-								<input id="locator" class="details-data" aria-labelledby="label" aria-describedby="itemDetails-combinedInfo"/>
-							</div>
-							<div class="row">
-								<label class="details-label" for="prefix" data-l10n-id="integration-citationDialog-details-prefix"></label>
-								<input id="prefix" class="details-data"/>					
-							</div>
-							<div class="row">
-								<label class="details-label" for="suffix" data-l10n-id="integration-citationDialog-details-suffix"></label>
-								<input id="suffix" class="details-data"/>
-							</div>
-							<div id="suppress-author-row" class="row">
+							<!--fx128: size="0" forces select have default native style -->
+							<select name="locator" id="label" class="details-label" size="0"></select>
+							<input id="locator" class="details-data" aria-labelledby="label" aria-describedby="itemDetails-combinedInfo"/>
+							
+							<label class="details-label" for="prefix" data-l10n-id="integration-citationDialog-details-prefix"></label>
+							<input id="prefix" class="details-data"/>
+							
+							<label class="details-label" for="suffix" data-l10n-id="integration-citationDialog-details-suffix"></label>
+							<input id="suffix" class="details-data"/>
+							
+							<!-- empty div for the left cell, so suppress author appears in the right cell -->
+							<div></div>
+							<div id="suppress-author-container" class="hbox">
 								<input id="suppress-author" type="checkbox"/>
 								<label for="suppress-author" data-l10n-id="integration-citationDialog-details-suppressAuthor"></label>
-							</div>				
+							</div>
 					</div>
 					<div class="buttons">
 						<button class="remove" data-l10n-id="integration-citationDialog-details-remove"></button>
diff --git a/scss/components/_citationDialog.scss b/scss/components/_citationDialog.scss
index 0dfbe4e7ce..4ea979e012 100644
--- a/scss/components/_citationDialog.scss
+++ b/scss/components/_citationDialog.scss
@@ -591,8 +591,8 @@
 			}
 		}
 		#itemDetails {
-			width: 400px;
 			.popup {
+				width: 364px; // with padding and border, the panel is 400px
 				.details-header {
 					.icon {
 						margin-inline-end: 5px;
@@ -602,16 +602,12 @@
 				}
 				.details {
 					margin: 16px 0;
-					display: flex;
-					flex-direction: column;
-					justify-content: space-between;
-					gap: 8px;
-
-					.row {
-						display: flex;
-						flex-direction: row;
-						align-items: center;
-						justify-content: end;
+					display: grid;
+					grid-template-columns: auto 1fr;
+					gap: 8px 1px;
+					align-items: center;
+					.details-label:not(select) {
+						text-align: end;
 					}
 					.details-data {
 						@media not (-moz-platform: windows) {
@@ -622,17 +618,14 @@
 						border-radius: 5px;
 						border: none;
 						box-shadow: 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.3);
-						width: 250px;
-						@media (-moz-platform: linux) {
-							width: 240px;
-						}
 					}
-					#suppress-author-row {
-						justify-content: start;
-						padding-inline-start: 100px;
+					#suppress-author-container {
+						// undo input's left margin to align checkbox with inputs
+						margin-left: -3px;
 					}
 					#label {
-						flex: 1;
+						// align <select>'s end with the end of prefix/suffix labels better
+						margin-inline-end: -1px;
 						@media (-moz-platform: macos) {
 							height: 22px;
 							// <select> with increased height is hard to position but this helps