TextField widget allows horizontal resize instead of vertical

Found a bug? Please fill out the sections below. 👍

Issue Summary

The admin widget for TextField allows vertical resize instead of vertical.

Steps to Reproduce

1. Setup the Wagtail Bakerydemo (e.g. with https://github.com/wagtail/docker-wagtail-develop)
2. Navigate to the “Gallery” page (ID = 70) – http://localhost:8000/admin/pages/70/edit/.
3. Try to resize the “Introduction” field

• Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

Instead of the horizontal resizing I would expect to be able to vertically resize.

Inspecting the field, you will find: style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 75px;"

Manually changing the resize: horizontal to resize: vertical creates the expected behaviour.

https://user-images.githubusercontent.com/24797493/119425723-bdda3580-bcbc-11eb-981d-0d15cb62971f.mov

https://user-images.githubusercontent.com/24797493/119425784-dcd8c780-bcbc-11eb-9792-2dcb7ffe03fb.mov

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: (yes / no)

Technical details

• Python version: Run python --version. -> Python 3.7.10
• Django version: Look in your requirements.txt, or run pip show django | grep Version. -> Django 3.1.11
• Wagtail version: Look at the bottom of the Settings menu in the Wagtail admin, or run pip show wagtail | grep Version:. -> master
• Browser version: You can use https://www.whatsmybrowser.org/ to find this out. – Firefox 88 (macOS)

[CharString]

This is a temporary workaround

# wagtail_hooks.py in one of your installed apps.
from wagtail.core import hooks


@hooks.register("insert_global_admin_css", order=100)
def global_admin_css():
    """Workaround wagtail issue 7210
    https://github.com/wagtail/wagtail/issues/7210
    """
    return "<style>textarea {resize:vertical !important}</style>"

And pass rows=0 to your Field or Block. Wagtail sets the default to 1 which negates the hole idea of auto resize.

[thibaudcolas]

@gasman personally I’m happy with either allowing both directions of manual resizing (what I’ve merged) or none (your PR).

The point in allowing vertical resizing in addition to horizontal is that people can make a field narrower as needed, and also change the height of the field so they can still see the whole content, without having to press “Enter” in the field to let the auto-size kick in. Preventing the auto-size logic from kicking in when the field is already big enough would be nice but certainly not a blocker to supporting this.