Auto-Growing Textarea

The chat-compose-box pattern nearly every AI product UI now uses — a textarea that grows taller as you type multi-line text, instead of scrolling internally or getting cut off — built with one CSS property and zero JavaScript: field-sizing: content (paired with min-height/max-height to set a floor and a cap). This is the exact problem the classic 'clone a hidden div, mirror the value into it, read its scrollHeight, set the textarea's height in a JS input handler' trick exists to solve; the browser now does it natively. Real, current, sourced support as of this run: Chrome/Edge since Chrome 123 (February 2024); two independent WebSearch queries agree Firefox shipped it in Firefox 152 (June 2026), which is also cited as the release that made it Baseline 'newly available'. Safari's status is deliberately left unconfirmed rather than asserted: the only mention found was Safari Technology Preview, with no source this run confirming a stable Safari release number — this environment's WebFetch to caniuse.com and webkit.org (to check directly) is blocked by the same egress policy noted throughout this log, so it's flagged as unverified rather than guessed. Degrades with zero risk either way: a browser that doesn't understand field-sizing: content just ignores the declaration and the textarea keeps its normal fixed-then-internally-scrolling behavior — not broken, not empty. (Vanilla example: live iframe preview + HTML/CSS tabs — click into the box and type a few lines.)

<div class="agt-wrap">
  <div class="agt-compose">
    <textarea class="agt-input" rows="1" placeholder="Type a multi-line message to watch this grow…"></textarea>
    <button class="agt-send" type="button" aria-label="Send">↑</button>
  </div>
  <span class="agt-note">Needs Chromium 123+ / Firefox 152+ — unverified in Safari stable</span>
</div>