fx-compat: Item box: Fix field sizing on all platforms
Layout should no longer shift when editing creators or fields. (Linux untested.)
This commit is contained in:
parent
16411422c8
commit
aea1303119
3 changed files with 21 additions and 28 deletions
|
@ -1,4 +1,6 @@
|
||||||
item-box {
|
item-box {
|
||||||
|
--row-height: 1.5em;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -14,7 +16,9 @@ item-box {
|
||||||
#info-table {
|
#info-table {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: max-content 1fr;
|
grid-template-columns: max-content 1fr;
|
||||||
grid-auto-rows: min-content;
|
// Make sure rows are at least --row-height tall, but no taller than their tallest child
|
||||||
|
// This lets rows expand for multi-line editors
|
||||||
|
grid-auto-rows: minmax(var(--row-height), max-content);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -31,8 +35,17 @@ item-box {
|
||||||
margin-inline-end: 5px;
|
margin-inline-end: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
td > input, .creator-name-box > input {
|
||||||
|
align-self: center;
|
||||||
|
// Fields have 3px borders; cancel them out
|
||||||
|
margin-top: -3px;
|
||||||
|
margin-bottom: -3px;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
td > input {
|
td > input {
|
||||||
align-self: stretch;
|
margin-inline-end: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
th > label {
|
th > label {
|
||||||
|
@ -119,9 +132,12 @@ item-box {
|
||||||
|
|
||||||
/* metadata field names */
|
/* metadata field names */
|
||||||
th {
|
th {
|
||||||
align-self: stretch;
|
display: flex;
|
||||||
|
height: var(--row-height);
|
||||||
|
align-self: start;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: right;
|
|
||||||
margin-inline-start: 5px !important;
|
margin-inline-start: 5px !important;
|
||||||
margin-inline-end: 2px !important;
|
margin-inline-end: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,5 @@
|
||||||
item-box {
|
item-box {
|
||||||
th {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zotero-clicky {
|
.zotero-clicky {
|
||||||
min-height: 17px;
|
min-height: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
td input {
|
|
||||||
margin: -2px 0 0;
|
|
||||||
padding: 1px;
|
|
||||||
border-width: 1px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.creator-name-box input {
|
|
||||||
margin-bottom: -1px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,14 +24,6 @@ item-box {
|
||||||
max-width: 7px;
|
max-width: 7px;
|
||||||
max-height: 7px;
|
max-height: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
td > input {
|
|
||||||
margin-top: -1px;
|
|
||||||
margin-bottom: -2.5px;
|
|
||||||
margin-inline-start: 0;
|
|
||||||
margin-inline-end: 5px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
|
/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
|
||||||
|
|
Loading…
Reference in a new issue