scriptoriumadmin/zotero
1
0
Fork 0
mirror of https://github.com/zotero/zotero.git synced 2026-09-27 01:21:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Citation dialog: fix broken item details popup with some non-english locales (#5354)

Browse source 
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
This commit is contained in:
abaevbog 2025-06-24 23:17:41 -07:00 • committed by GitHub
parent 774173f04d
commit 4dbe0f7842
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
chrome/content/zotero/integration/citationDialog.xhtml
View file

@ -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>

31
scss/components/_citationDialog.scss
View file

@ -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