fix(MessageComposer): make textarea full-width in custom composer layouts (#3241)

### 🎯 Goal

The message composer `<textarea>` does not fill its container when the
SDK is integrated into a custom composer layout — it collapses to ~160px
— even though it stretches correctly in our own example apps.

Root cause: the rules that give the composer textarea its width live
only inside the `.str-chat__message-composer-controls` wrapper, scoped
as:

```scss
.str-chat .str-chat__message-composer-controls .str-chat__textarea textarea { width: 100%; }
```

`.str-chat__textarea` and its `<textarea>` are rendered by
`TextareaComposer`, but a custom composer that renders
`<TextareaComposer>` without the default `MessageComposerUI` never
produces the `.str-chat__message-composer-controls` wrapper. So the
selector never matches, no `width` is applied, and the bare `<textarea>`
falls back to its intrinsic `cols=20` width (~160px). Our example apps
use the default `MessageComposerUI`, so the wrapper is present and the
bug is invisible there.

This is a recurring integration pain point, hence fixing it in the SDK
rather than asking each integrator to re-add the width rule.

### 🛠 Implementation details

Lifted the `.str-chat__textarea` block out of the
`.str-chat__message-composer-controls` wrapper in `MessageComposer.scss`
so it is scoped to the `TextareaComposer`'s own elements (`.str-chat
.str-chat__textarea` / `.str-chat .str-chat__textarea textarea`) instead
of the composer-controls layout wrapper.

Why this is safe:

- `.str-chat__textarea` and its `<textarea>` are rendered **only** by
`TextareaComposer`, and no other rule targets `.str-chat__textarea`, so
lowering selector specificity from `(0,3,1)` to `(0,2,1)` conflicts with
nothing.
- `flex: 1` on the wrapper is ignored when its parent isn't a flex
container (custom composers) and continues to work in the default
composer where the parent is `display: flex`.
- The default `MessageComposerUI` already had all of these declarations
applied, so its rendering is unchanged.

Net effect: any composer that renders `<TextareaComposer>` now gets a
full-width textarea, with or without the default `MessageComposerUI`.

### 🎨 UI Changes

Verified live in a custom (Slack-style) composer that renders
`<TextareaComposer>` without `MessageComposerUI`:

- **Before:** composer `<textarea>` computed width = **160px**
(intrinsic `cols=20` fallback).
- **After:** composer `<textarea>` computed width = **1059px** — fills
the composer container; the placeholder spans the full width.

No visual change in the default composer (`MessageComposerUI`), which
already carried these styles.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved message composer layout consistency by ensuring the text area
consistently fills available space across different composer
configurations.
* Preserved the existing text area look and behavior, including
typography, sizing, scrollbar handling, and focus-visible styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: oliverlaz

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,41 @@
     }
   }
 
+  // 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;
+
+      // 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;
+      }
+    }
+  }
+
   .str-chat__message-composer--command-active
     .str-chat__message-composer__additional-actions {
     max-width: 0;