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",

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' } });

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"

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