fix(messaging-ui): composer height was being clobbered by a class-name collision

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>
This commit is contained in:
2026-07-25 17:35:40 +05:30
parent e2f66fe622
commit eb0ace8ad7
4 changed files with 13 additions and 3 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@insignia/iios-messaging-ui", "name": "@insignia/iios-messaging-ui",
"version": "0.1.12", "version": "0.1.13",
"type": "module", "type": "module",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/index.js", "module": "dist/index.js",
@@ -16,6 +16,14 @@ describe('<Composer /> formatting + native text services', () => {
expect(box.getAttribute('autocorrect')).toBe('on'); 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 () => { it('Enter sends, Shift+Enter does not (it makes a newline)', async () => {
const { onSend, box } = mount(); const { onSend, box } = mount();
fireEvent.change(box, { target: { value: 'hello' } }); fireEvent.change(box, { target: { value: 'hello' } });
@@ -203,7 +203,7 @@ export function Composer({
) : null} ) : null}
<textarea <textarea
ref={inputRef} ref={inputRef}
className="miu-input miu-textarea" className="miu-input miu-composer-box"
value={draft} value={draft}
placeholder={placeholder} placeholder={placeholder}
aria-label="Message" aria-label="Message"
+3 -1
View File
@@ -524,7 +524,9 @@ button.miu-attach-dl:hover {
/* Chat box: one row by default, grows with content (JS sets height), then scrolls. /* 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 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. */ 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; box-sizing: border-box;
resize: none; resize: none;
/* Collapsed height must equal the single-line <input> this replaced: 20px of line + 16px /* Collapsed height must equal the single-line <input> this replaced: 20px of line + 16px