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(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;