From 9a0c74cb6e834de941253db7c9decee12e85dd0a Mon Sep 17 00:00:00 2001
From: maaz519 <maaz@insigniaconsultancy.com>
Date: Sat, 25 Jul 2026 17:16:28 +0530
Subject: [PATCH] fix(messaging-ui): composer no longer stretches the
 send/attach buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 packages/iios-messaging-ui/package.json        |  2 +-
 .../src/components/composer.tsx                |  5 ++++-
 packages/iios-messaging-ui/src/styles.css      | 18 +++++++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/iios-messaging-ui/package.json b/packages/iios-messaging-ui/package.json
index 9f968ac..d250721 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.10",
+  "version": "0.1.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/packages/iios-messaging-ui/src/components/composer.tsx b/packages/iios-messaging-ui/src/components/composer.tsx
index 20ecc33..e0beb6f 100644
--- a/packages/iios-messaging-ui/src/components/composer.tsx
+++ b/packages/iios-messaging-ui/src/components/composer.tsx
@@ -54,11 +54,14 @@ export function Composer({
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   // Grow with the content up to the CSS max-height, then scroll — a chat box, not a fixed field.
+  // The box is border-box, but scrollHeight excludes the border, so add it back or every measure
+  // lands a couple of pixels short and the textarea shows a scrollbar it doesn't need.
   useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     el.style.height = 'auto';
-    el.style.height = `${el.scrollHeight}px`;
+    const border = el.offsetHeight - el.clientHeight;
+    el.style.height = `${el.scrollHeight + border}px`;
   }, [draft]);
 
   /**
diff --git a/packages/iios-messaging-ui/src/styles.css b/packages/iios-messaging-ui/src/styles.css
index 0340cf0..f6c07cf 100644
--- a/packages/iios-messaging-ui/src/styles.css
+++ b/packages/iios-messaging-ui/src/styles.css
@@ -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;