Make textarea inputs auto-expand to accommodate longer text fields on the record page

seancolsen commented 4 months ago

Fixes #3466

Before

All textarea inputs on the record page have the same height, regardless of their content.

After

Screencast_20240229_143539.webm

The textarea inputs with more content are bigger to start.
They are also smaller when possible (occupying only one line for shorter text).
They have a max height of 400px which seems reasonable to me.
They grow as the user types
They don't shrink as the user types. Auto-growing ended up being easy. But auto-shrinking seems like it will be significantly more work. Perhaps there's a clever solution I haven't yet thought of. But I gave it some time and then decided to move on for the sake of priority. I'm not sure that it's all that important anyway. The user can manually shrink the textarea using the resize handle if needed.

Additional thoughts

One small concern I have is that, because small text fields appear as one line to start, users may not understand that they can enter newlines into those inputs. All things considered though, I have a slight preference for keeping them short because it conserves space.

Here's an interesting observation I have: the AI chatbots of late all seem to be following the same UX pattern of having an adaptively growing text box. That puts my mind at ease a bit because I think people are getting more accustomed to this UX pattern.

Checklist

[x] My pull request has a descriptive title (not a vague title like Update index.md).
[x] My pull request targets the develop branch of the repository
[x] My commit messages follow best practices.
[x] My code follows the established code style of the repository.
[x] I added tests for the changes I made (if applicable).
[x] I added or updated documentation (if applicable).
[x] I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

``` Developer Certificate of Origin Version 1.1 Copyright (C) 2004, 2006 The Linux Foundation and its contributors. 1 Letterman Drive Suite D4700 San Francisco, CA, 94129 Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. Developer's Certificate of Origin 1.1 By making a contribution to this project, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved. ```

seancolsen commented 4 months ago

@pavish I've assigned you to review this PR. Please review from a code perspective, and also feel free to weigh in with your thoughts and opinions on the effect this change will have on usability. For context, this change stems from discussions that Kriti and Ghislaine and I have been having about how we can improve usability enough to move our CRM to Mathesar.

@ghislaineguerin and @kgodey, because our plans regarding this change were somewhat tentative, I've also assigned you to review this so that we can be certain it's worth merging. I'm hoping the attached screencap will give you a clear enough picture of how it works, but feel free to play with it locally too.

ghislaineguerin commented 4 months ago

@seancolsen Looks good to me.

mathesar-foundation / mathesar