diff --git a/packages/iios-messaging-ui/package.json b/packages/iios-messaging-ui/package.json index d250721..4c0fb1d 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.11", + "version": "0.1.12", "type": "module", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/iios-messaging-ui/src/styles.css b/packages/iios-messaging-ui/src/styles.css index f6c07cf..5cdd7b3 100644 --- a/packages/iios-messaging-ui/src/styles.css +++ b/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; - height: 40px; + width: var(--miu-composer-h); + 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 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;