fix: trim long text in form controls and username block

[ihor-romaniuk]

Description:

This pull request contains minor fixes that occur when the user has a very long name and there are long choices in form elements.
In these cases, we have the text or element coming out of the sizes of the containers reserved for their display.

Screenshots before:

text overloading with an extremely long username	incorrect left padding with a long username on mobile	text overloading with a long option in form select

Screenshots after:

with a long username with trimming	with a short username

with a long username without trimming	with a long username with trimming

with a long option in form select	with a short option in form select

Related Pull Requests:

PR to the master branch: #888
PR to the open-release/quince.master branch: #899

[openedx-webhooks]

Thanks for the pull request, @ihor-romaniuk! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[e0d]

@ihor-romaniuk looks like there a few failures.

[ihor-romaniuk]

@e0d Sorry for that. Snapshots were updated.

[openedx-webhooks]

@ihor-romaniuk 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.