(Minor visual bug) Text input field grows when entering text at 150%+ zoom when it shouldn't

[FunctionDJ]

• Node version: [latest Docker tag]
• Browser version: Firefox 116.0
• Device, operating system: Kubuntu 23.04
• The Lounge version: v4.4.1 (Docker)

---

[FunctionDJ]

Okay it's probably not a CSS issue. The height property on the <textarea> gets set to 38px when something is typed in. I'll try looking at the source code to see if i can determine why, but i think thelounge is using Vue and i only know React well.

[FunctionDJ]

There seems to be some non-trivial logic involved in the size logic.
This might be a CSS issue after all because the elements inherent scrollHeight is used to calculate the final height that gets set on the element.
So the question is why the element's scrollHeight changes at this zoom level when something is entered in the textarea.
I should mention that the box shrinks again when you remove all text from the box.

thelounge/client/components/ChatInput.vue

Lines 106 to 122 in f999db9

	if (!input.value) {
	return;
	}
	const style = window.getComputedStyle(input.value);
	const lineHeight = parseFloat(style.lineHeight) || 1;
	// Start by resetting height before computing as scrollHeight does not
	// decrease when deleting characters
	input.value.style.height = "";
	// Use scrollHeight to calculate how many lines there are in input, and ceil the value
	// because some browsers tend to incorrently round the values when using high density
	// displays or using page zoom feature
	input.value.style.height = `${
	Math.ceil(input.value.scrollHeight / lineHeight) * lineHeight
	}px`;