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 open-release/palm.master branch: #887
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 are some failures.

[ihor-romaniuk]

@e0d Sorry for that. Snapshots were updated.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (6957ad0) 66.22% compared to head (331e42c) 66.22%.
Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #888   +/-   ##
=======================================
  Coverage   66.22%   66.22%           
=======================================
  Files          52       52           
  Lines         823      823           
  Branches      158      158           
=======================================
  Hits          545      545           
  Misses        268      268           
  Partials       10       10           

Files	Coverage Δ
src/profile/ProfilePage.jsx	80.88% <ø> (ø)
src/profile/forms/elements/Visibility.jsx	100.00% <ø> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[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.