From a1231c875b1ff8538405d1598f997c972298caa6 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Wed, 11 Dec 2024 00:21:05 +0200 Subject: [PATCH] web/composer: fix weird 1px scroll --- web/src/ui/composer/MessageComposer.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx index f89337c..5bdc5a2 100644 --- a/web/src/ui/composer/MessageComposer.tsx +++ b/web/src/ui/composer/MessageComposer.tsx @@ -374,11 +374,17 @@ const MessageComposer = () => { // checking scrollHeight seems to be the only reliable way to get the size of the text. textInput.current.rows = 1 const newTextRows = Math.min((textInput.current.scrollHeight - 16) / 20, MAX_TEXTAREA_ROWS) + if (newTextRows === MAX_TEXTAREA_ROWS) { + textInput.current.style.overflowY = "auto" + } else { + // There's a weird 1px scroll when using line-height, so set overflow to hidden when it's not needed + textInput.current.style.overflowY = "hidden" + } textInput.current.rows = newTextRows textRows.current = newTextRows // This has to be called unconditionally, because setting rows = 1 messes up the scroll state otherwise roomCtx.scrollToBottom() - }, [state, roomCtx]) + }, [state.text, roomCtx]) // Saving to localStorage could be done in the reducer, but that's not very proper, so do it in an effect. useEffect(() => { roomCtx.isEditing.emit(editing !== null)