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

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]);
 
   /**

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;