How to make `textarea` auto-resize with Alpine.js

[nelsonic]

At present we have a <textarea> for capturing items in the MVP App:

If we input too much text into the <textarea> it starts to scroll which is a poor experience on mobile.

On desktop it kinda works to have a smaller box ...

But it would also be nice to tidy up the UX around the input area.

Todo

• Research how to make the <textarea> resize automatically depending on the content.
• Should not expand more than the height of the screen minus the keyboard.

Starting point: https://benborgers.com/posts/alpine-textarea-auto-resize + https://youtu.be/z7130uJ3H7w

[nelsonic]

@SimonLab I don't know if this will take more than T2h ... ⏳ 💭 🤷‍♂️
(if it takes longer, please just update the label ...)
Please record your progress in this thread so everyone understands the code.

Having just watched: "Alpine.js Auto Textarea Height" https://youtu.be/z7130uJ3H7w

I feel like we could get a basic version of this working in T25m. 🤞
The tricky part will be the maximum height.
But I think Tailwind max-height should help us with that: https://tailwindcss.com/docs/max-height
Or we can derive it based on the screen height and set that as the limit.

[nelsonic]

This UI/UX still bugs me while using the MVP mvp.fly.dev ... 🙄

@SimonLab if you want to pair on this today [Friday] please LMK. 🧑‍💻
Would make a good break from working on the README.md ... dwyl/mvp#89 😜