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:
@@ -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",
|
||||
|
||||
@@ -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' } });
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user