From eb0ace8ad7e03ed865a3bef53fc8aae720b42e6b Mon Sep 17 00:00:00 2001
From: maaz519 <maaz@insigniaconsultancy.com>
Date: Sat, 25 Jul 2026 17:35:40 +0530
Subject: [PATCH] fix(messaging-ui): composer height was being clobbered by a
 class-name collision
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chat composer reused .miu-textarea, which the INBOX MAIL composer already
owned further down the stylesheet with `resize: vertical; min-height: 90px`.
Equal specificity, later rule wins — so the mail styling applied to the chat box:
90px tall with a resize grabber, and every height fix in 0.1.10–0.1.12 was
silently overridden. That is why the box never changed.

The composer now uses its own .miu-composer-box; the inbox rule is untouched.
Adds a regression test asserting the composer does not carry .miu-textarea.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/iios-messaging-ui/package.json                   | 2 +-
 .../iios-messaging-ui/src/components/composer.test.tsx    | 8 ++++++++
 packages/iios-messaging-ui/src/components/composer.tsx    | 2 +-
 packages/iios-messaging-ui/src/styles.css                 | 4 +++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/iios-messaging-ui/package.json b/packages/iios-messaging-ui/package.json
index 4c0fb1d..c5a77d0 100644
--- a/packages/iios-messaging-ui/package.json
+++ b/packages/iios-messaging-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@insignia/iios-messaging-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/packages/iios-messaging-ui/src/components/composer.test.tsx b/packages/iios-messaging-ui/src/components/composer.test.tsx
index c6947f8..3896a32 100644
--- a/packages/iios-messaging-ui/src/components/composer.test.tsx
+++ b/packages/iios-messaging-ui/src/components/composer.test.tsx
@@ -16,6 +16,14 @@ describe('<Composer /> formatting + native text services', () => {
     expect(box.getAttribute('autocorrect')).toBe('on');
   });
 
+  it('does NOT reuse .miu-textarea — that class belongs to the inbox mail composer', () => {
+    // Regression: sharing it let the mail rule (resize: vertical; min-height: 90px), which is
+    // declared later in the stylesheet, win at equal specificity and inflate the chat composer.
+    const { box } = mount();
+    expect(box.classList.contains('miu-composer-box')).toBe(true);
+    expect(box.classList.contains('miu-textarea')).toBe(false);
+  });
+
   it('Enter sends, Shift+Enter does not (it makes a newline)', async () => {
     const { onSend, box } = mount();
     fireEvent.change(box, { target: { value: 'hello' } });
diff --git a/packages/iios-messaging-ui/src/components/composer.tsx b/packages/iios-messaging-ui/src/components/composer.tsx
index e0beb6f..c7a45c9 100644
--- a/packages/iios-messaging-ui/src/components/composer.tsx
+++ b/packages/iios-messaging-ui/src/components/composer.tsx
@@ -203,7 +203,7 @@ export function Composer({
         ) : null}
         <textarea
           ref={inputRef}
-          className="miu-input miu-textarea"
+          className="miu-input miu-composer-box"
           value={draft}
           placeholder={placeholder}
           aria-label="Message"
diff --git a/packages/iios-messaging-ui/src/styles.css b/packages/iios-messaging-ui/src/styles.css
index 5cdd7b3..95ee0a6 100644
--- a/packages/iios-messaging-ui/src/styles.css
+++ b/packages/iios-messaging-ui/src/styles.css
@@ -524,7 +524,9 @@ button.miu-attach-dl:hover {
 /* Chat box: one row by default, grows with content (JS sets height), then scrolls.
    border-box so min/max-height are the REAL height — under the default content-box the padding
    and border are added on top, which made a "38px" box render ~58px and dragged the row with it. */
-.miu-textarea {
+/* Composer box only. NOTE: .miu-textarea is already taken by the inbox mail composer further
+   down (resize: vertical; min-height: 90px) — sharing it made that rule win and blow this up. */
+.miu-composer-box {
   box-sizing: border-box;
   resize: none;
   /* Collapsed height must equal the single-line <input> this replaced: 20px of line + 16px