Use `field-sizing` CSS feature if it exists.

Also fixes wrong padding for the chat textarea.

src/plugins/chatview/bottom-panel.js

@@ -63,7 +63,7 @@ export default class ChatBottomPanel extends CustomElement {
         chatboxviews.get(this.getAttribute('jid'))?.emitBlurred(ev);
     }
 
-    onDragOver (ev) { // eslint-disable-line class-methods-use-this
+    onDragOver (ev) {
         ev.preventDefault();
     }
 

src/plugins/chatview/styles/chat-bottom-panel.scss

@@ -55,10 +55,8 @@
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
                     border-bottom-radius: var(--chatbox-border-radius);
-                    padding-left: 0.5em;
-                    padding-right: 4.5em;
-                    padding-top: 0.5em;
-                    padding-bottom:0.5em;
+                    field-sizing: content;
+                    padding: 0.5em;
                     width: 100%;
                     border: none;
                     min-height: var(--chat-textarea-height);

src/plugins/chatview/utils.js

@@ -54,6 +54,10 @@ export async function parseMessageForCommands (chat, text) {
 }
 
 export function resetElementHeight (ev) {
+    if (window.CSS?.supports('field-sizing', 'content')) {
+        return;
+    }
+
     if (ev.target.value) {
         const height = ev.target.scrollHeight + 'px';
         if (ev.target.style.height != height) {

src/plugins/muc-views/styles/muc-bottom-panel.scss

@@ -50,6 +50,7 @@
                     width: 100%;
                     border: none;
                     border-bottom-right-radius: 0;
+                    field-sizing: content;
                 }
             }
         }