Investigate auto-growing textarea elements

[fisharebest]

The technique shown at https://codepen.io/chriscoyier/pen/XWKEVLy seems to work well.

Need to get margin/padding/border settings right, to match the bootstrap form-control class.

[fisharebest]

/* Auto-growing textarea inputs. */
.wt-autogrow-textarea {
    display: grid;
    /* Needs same layout as the textarea */
    padding: 0.375rem 0.75rem; <<<<<< This is not quite right.
}
.wt-autogrow-textarea::after {
    content: attr(data-wt-copy-of-text) " ";
    white-space: pre-wrap;
    visibility: hidden;
}
.wt-autogrow-textarea > textarea {
    resize: none;
    overflow: hidden;
}
.wt-autogrow-textarea > textarea,
.wt-autogrow-textarea::after {
    grid-area: 1 / 1 / 2 / 2;
}

  document.querySelectorAll('.wt-autogrow-textarea').forEach(element => {
    const textarea = element.querySelector('textarea');
    element.dataset.wtCopyOfText = textarea.value;
    textarea.addEventListener('input', function (event) {
      element.dataset.wtCopyOfText = event.target.value;
    });
  });

[kiwi3685]

I've used http://www.jacklmoore.com/autosize/ for years, and have also implemented it in my webtrees 2.1.18 site. Easy to install, and works with no adjustments required.