feat: New option to make modal resizable

[damianstasik]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Issue Description

This PR adds a "resize" handle to modals that have the resizable prop enabled.

Closes: #1879

Approach

TODOs before merging

• A changelog entry is created automatically using the pull request title (do not manually add a changelog entry)

[parse-github-assistant]

Thanks for opening this pull request!

• 🎉 We are excited about your hands-on contribution!

[damianstasik]

Here is how the final resize handle looks:

[damianstasik]

@mtrezza regarding labels being resized as well: I tried to force a max-width on them, but the Field component would require a slightly bigger refactor that I did not want to include in this PR.

[mtrezza]

That's fine then, thanks for looking into it.

[mtrezza]

I tried it out and I wonder how we can combine the vertical and horizontal resizing by dragging the dialog corner. That the dialog can only be resized horizontally in the dialog corner and only vertically in the field corner is a rather unusual behavior.

There is also a bug that selects all text in the dialog when I resize horizontally:

Screen.Recording.2021-10-27.at.22.42.39.mov

[damianstasik]

@mtrezza Maybe instead of the drag handle in the corner, we could allow resizing the modal with both the left and right edge of the container.

[mtrezza]

Not sure how the experience of that would be. I can only think of a corner drag handle, like the field had. That is the UI behavior a user would typically expect. If there is another way that is intuitive, we can also explore that.

[damianstasik]

It could work as in a regular OS window manager, the whole side could be used to resize the modal:

sideresizable.mov

[mtrezza]

If it's separately resizable on the horizontal and vertical side it would certainly be an improvement over the status quo, but it would still be impractical when you cannot resize both simultaneously. I think that's an issue when want to resize because there is a large JSON object that you want to display and you want to fit the dialog just right to display it.

What is the difficulty to let resize both at the same time? Is it a component restriction?

[parse-github-assistant]

I will reformat the title to use the proper commit message syntax.