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();
     });