fix(messaging-ui): composer no longer stretches the send/attach buttons

The textarea swap made the composer row tall and dragged the controls with it.
Three causes, all fixed:

- No box-sizing anywhere in the stylesheet, so `min-height: 38px` on a padded,
  bordered textarea rendered ~58px (content-box adds 18px padding + 2px border
  on top). The textarea is now border-box with a 40px min-height — the same
  height the old single-line input had.
- .miu-composer-row is display:flex with no align-items, so it defaulted to
  `stretch` and the buttons — neither of which declared a height — grew to the
  row. Now align-items: flex-end, so controls stay pinned to the bottom while
  the box grows upward (WhatsApp behaviour), with an explicit 40px on both.
  The send height is scoped to .miu-composer so modal/settings buttons keep
  their own sizing.
- The auto-grow effect set height = scrollHeight, which under content-box
  double-counted padding on every keystroke. It now compensates for the border
  explicitly, correct under border-box.

Bumped to 0.1.11. SDK suite: 17 files / 98 tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-25 17:16:28 +05:30
parent 0c8eaaf74b
commit 9a0c74cb6e
3 changed files with 20 additions and 5 deletions
+15 -3
View File
@@ -371,13 +371,17 @@
.miu-composer-row {
display: flex;
gap: 8px;
/* Pin the controls to the bottom so a growing textarea never stretches them (WhatsApp). */
align-items: flex-end;
}
.miu-file-input {
display: none;
}
.miu-attach-btn {
flex-shrink: 0;
width: 38px;
box-sizing: border-box;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--miu-border);
background: var(--miu-panel);
@@ -515,10 +519,13 @@ button.miu-attach-dl:hover {
.miu-input:focus {
border-color: var(--miu-accent);
}
/* 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
and border are added on top, which made a "38px" box render ~58px and dragged the row with it. */
.miu-textarea {
box-sizing: border-box;
resize: none;
min-height: 38px;
min-height: 40px;
max-height: 160px;
overflow-y: auto;
line-height: 1.45;
@@ -587,6 +594,11 @@ button.miu-attach-dl:hover {
color: var(--miu-accent-text);
background: var(--miu-accent);
}
.miu-composer .miu-send {
box-sizing: border-box;
flex-shrink: 0;
height: 40px;
}
.miu-send:disabled {
opacity: 0.5;
cursor: not-allowed;