packages/iios-messaging-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insignia/iios-messaging-ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/iios-messaging-ui/src/styles.css

@@ -10,6 +10,8 @@
   --miu-accent: #fda913;
   --miu-accent-text: #1a1206;
   --miu-radius: 12px;
+  /* Collapsed composer height — textarea, attach and send all use this so they never diverge. */
+  --miu-composer-h: 38px;
 
   display: flex;
   height: 100%;
@@ -380,8 +382,8 @@
 .miu-attach-btn {
   flex-shrink: 0;
   box-sizing: border-box;
-  width: 40px;
+  width: var(--miu-composer-h);
-  height: 40px;
+  height: var(--miu-composer-h);
   border-radius: 10px;
   border: 1px solid var(--miu-border);
   background: var(--miu-panel);
@@ -525,10 +527,14 @@ button.miu-attach-dl:hover {
 .miu-textarea {
   box-sizing: border-box;
   resize: none;
-  min-height: 40px;
+  /* Collapsed height must equal the single-line <input> this replaced: 20px of line + 16px
+     padding + 2px border = 38px. Padding is tightened from .miu-input's 9px so a 14px/1.4 line
+     fits the content box exactly — at 9px it overflowed and forced a scrollbar. */
+  padding: 8px 12px;
+  line-height: 1.4;
+  min-height: var(--miu-composer-h);
   max-height: 160px;
   overflow-y: auto;
-  line-height: 1.45;
   font-family: inherit;
 }
 .miu-format-bar {
@@ -597,7 +603,7 @@ button.miu-attach-dl:hover {
 .miu-composer .miu-send {
   box-sizing: border-box;
   flex-shrink: 0;
-  height: 40px;
+  height: var(--miu-composer-h);
 }
 .miu-send:disabled {
   opacity: 0.5;