mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

editable-text better text match to textarea

Browse source 
- Remove margins and add a border to the pseudo-element.
It improves how the text of the pseudo-component matches the text from
textarea and should prevent the scrollbar from appearing due to mismatch.
- Swap explicit width setting for editable-text in itemBox for
min-width: 0. It still allows the editable-text to be shrunk when the
itemBox is narrow but does not cause mismatches between pseudo elements
and the textarea.
This commit is contained in:
abaevbog 2024-01-11 01:45:23 -05:00 committed by Dan Stillman
parent f4d3ef94e7
commit 5ae6f88b15
2 changed files with 3 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scss/elements/_editableText.scss
View file

@ -50,9 +50,7 @@ editable-text {
&:not([nowrap])::after { &:not([nowrap])::after {
content: attr(value) ' '; content: attr(value) ' ';
visibility: hidden; visibility: hidden;
margin-inline-start: 1px; border: 1px solid transparent;
margin-top: 1px;
margin-bottom: 1px;
padding: var(--editable-text-padding-block) var(--editable-text-padding-inline); padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
font: inherit; font: inherit;
line-height: inherit; line-height: inherit;

4
scss/elements/_itemBox.scss
View file

@ -34,8 +34,8 @@ item-box {
flex: 1; // stretch value field as much as possible flex: 1; // stretch value field as much as possible
max-width: 100%; // stay within .meta-data when the itemBox is narrow max-width: 100%; // stay within .meta-data when the itemBox is narrow
.input { .input {
// keep input within editable-text when the itemBox is narrow // allow input to be shrunk by other elements when the itemBox is narrow
width: calc(100% - 2*var(--editable-text-padding-inline) - 1px) min-width: 0;
} }
// keep multiline fields as tall as they have to be unless they're focused // keep multiline fields as tall as they have to be unless they're focused
&[multiline] textarea:not(:focus) { &[multiline] textarea:not(:focus) {