fix(ui): handle on-screen keyboard visibility to adjust layout and prevent inputs from being obscured

ts_web/elements/sio-message-input.ts

@@ -168,6 +168,8 @@ export class SioMessageInput extends DeesElement {
           .value=${this.messageText}
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
           ?disabled=${this.disabled}
           rows="1"
         ></textarea>
@@ -216,6 +218,22 @@ export class SioMessageInput extends DeesElement {
     }
   }
 
+  private handleFocus() {
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true
+      }));
+    }, 50);
+  }
+
+  private handleBlur() {
+    this.dispatchEvent(new CustomEvent('input-blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   private sendMessage() {
     if (!this.messageText.trim() && this.pendingAttachments.length === 0) {
       return;