From c5dc66d0cbf926a3aa0a35d655d5aa0c67aff683 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 13 Jul 2026 17:18:17 +0200
Subject: [PATCH 1/2] fix(MessageComposer): make textarea full-width in custom
 composer layouts

Scope the .str-chat__textarea sizing rules to the TextareaComposer's own
elements instead of the .str-chat__message-composer-controls wrapper, so a
custom composer that renders <TextareaComposer> without the default
MessageComposerUI still gets a full-width textarea rather than the bare
<textarea> falling back to its intrinsic cols width (~160px).
---
 .../styling/MessageComposer.scss              | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss
index af38a6c6b..f714e17fc 100644
--- a/src/components/MessageComposer/styling/MessageComposer.scss
+++ b/src/components/MessageComposer/styling/MessageComposer.scss
@@ -191,27 +191,6 @@
           ease-out;
     }
 
-    .str-chat__textarea {
-      flex: 1;
-      min-width: 0;
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      textarea {
-        background: transparent;
-        color: var(--str-chat__input-text-default);
-        font: var(--str-chat__font-body-default);
-        resize: none;
-        border: none;
-        box-shadow: none;
-        outline: none;
-        width: 100%;
-        scrollbar-width: none;
-      }
-    }
-
     .str-chat__emoji-picker-button {
       display: flex;
       cursor: pointer;
@@ -265,6 +244,32 @@
     }
   }
 
+  // Scoped to the TextareaComposer's own elements (not the composer-controls
+  // wrapper) so the textarea fills its container in any composer layout — e.g.
+  // a custom composer that renders <TextareaComposer> without the default
+  // MessageComposerUI. Without this the bare <textarea> falls back to its
+  // intrinsic `cols` width (~160px).
+  .str-chat__textarea {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    textarea {
+      background: transparent;
+      color: var(--str-chat__input-text-default);
+      font: var(--str-chat__font-body-default);
+      resize: none;
+      border: none;
+      box-shadow: none;
+      outline: none;
+      width: 100%;
+      scrollbar-width: none;
+    }
+  }
+
   .str-chat__message-composer--command-active
     .str-chat__message-composer__additional-actions {
     max-width: 0;

From 4cc6b5758c1527edbdec9467047051ea890f2245 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Tue, 14 Jul 2026 10:04:26 +0200
Subject: [PATCH 2/2] fix(MessageComposer): keep textarea focus ring suppressed
 after width fix

Loosening the .str-chat__textarea selector dropped its specificity from
(0,3,1) to (0,2,1), which let the global `.str-chat *:focus-visible`
outline rule (base.scss, (0,3,0)) override the textarea's `outline: none`
and show a focus ring. Re-assert the reset on :focus-visible so it lands at
(0,3,1) and keeps outranking the global outline.
---
 .../MessageComposer/styling/MessageComposer.scss         | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss
index f714e17fc..b3c7e125d 100644
--- a/src/components/MessageComposer/styling/MessageComposer.scss
+++ b/src/components/MessageComposer/styling/MessageComposer.scss
@@ -267,6 +267,15 @@
       outline: none;
       width: 100%;
       scrollbar-width: none;
+
+      // The composer intentionally has no focus ring on the textarea itself.
+      // Re-assert the reset on :focus-visible so it keeps outranking the global
+      // `.str-chat *:not(:disabled):focus-visible` outline (base.scss, (0,3,0))
+      // now that this rule is scoped one level shallower (was (0,3,1) under
+      // .str-chat__message-composer-controls, now (0,2,1)).
+      &:focus-visible {
+        outline: none;
+      }
     }
   }