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

editable-text: Accurately set height limits from min/max-lines

Browse source 
2ex wasn't quite right, so let's use the actual line-height when
possible.
This commit is contained in:
Abe Jellinek 2024-02-27 11:31:14 -08:00
parent ea1b18881c
commit 50331b9a04
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
chrome/content/zotero/elements/editableText.js
View file

@ -292,6 +292,17 @@
if (this.maxLines > 0) {
this.style.setProperty("--max-visible-lines", this.maxLines);
}
// Calculate line-height in ems so we don't need to recalculate if font-size changes
// TODO: Revisit once we can use the css 'lh' unit (fx >=120)
let { lineHeight, fontSize } = getComputedStyle(this._input);
let lineHeightRelative = parseFloat(lineHeight) / parseFloat(fontSize);
if (isNaN(lineHeightRelative)) {
this.style.setProperty('--line-height', '2ex');
}
else {
this.style.setProperty('--line-height', lineHeightRelative + 'em');
}
}
if (this.ariaLabel.length) {

4
scss/elements/_editableText.scss
View file

@ -59,7 +59,7 @@ editable-text {
&[max-lines] {
&::after, .input {
max-height: calc(2ex * var(--max-visible-lines));
max-height: calc(var(--line-height) * var(--max-visible-lines));
scrollbar-width: auto;
}
&::after {
@ -79,7 +79,7 @@ editable-text {
// Necessary for consistent padding, even if it's actually an <input>
-moz-default-appearance: textarea;
min-height: calc(2ex * var(--min-visible-lines));
min-height: calc(var(--line-height) * var(--min-visible-lines));
margin: 0;
border: 1px solid transparent;