Use CSS resizing for send textarea

d27d750cb2888c6c8a7980f00cb08e4c55901041

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/RossAscends-mods.js+30 -0 Viewed

         saveSettingsDebounced();
     });
 +    const cssAutofit = CSS.supports('field-sizing', 'content');
++
 +    if (cssAutofit) {
 +        sendTextArea.style['fieldSizing'] = 'content';
 +        sendTextArea.style['height'] = 'auto';
++
 +        let lastHeight = chatBlock.offsetHeight;
 +        const chatBlockResizeObserver = new ResizeObserver((entries) => {
 +            for (const entry of entries) {
 +                if (entry.target !== chatBlock) {
 +                    continue;
 +                }
++
 +                const threshold = 1;
 +                const newHeight = chatBlock.offsetHeight;
 +                const deltaHeight = newHeight - lastHeight;
 +                const isScrollAtBottom = Math.abs(chatBlock.scrollHeight - chatBlock.scrollTop - newHeight) <= threshold;
++
 +                if (!isScrollAtBottom && Math.abs(deltaHeight) > threshold) {
 +                    chatBlock.scrollTop -= deltaHeight;
 +                }
 +                lastHeight = newHeight;
 +            }
 +        });
++
 +        chatBlockResizeObserver.observe(chatBlock);
 +    }
++
     sendTextArea.addEventListener('input', () => {
 +        if (!cssAutofit) {
             const hasContent = sendTextArea.value !== '';
             const fitsCurrentSize = sendTextArea.scrollHeight <= sendTextArea.offsetHeight;
             const isScrollbarShown = sendTextArea.clientWidth < sendTextArea.offsetWidth;

             const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
             if (needsDebounce) autoFitSendTextAreaDebounced();
             else autoFitSendTextArea();
 +        }
         saveUserInputDebounced();
     });