fix degree and employment form fields

[umarmughal824]

Pre-Flight checklist

• Screenshots and design review for any changes that affect layout or styling
  • Desktop screenshots
  • Mobile width screenshots
• Testing
  • Code is tested
  • Changes have been manually tested

What are the relevant tickets?

fixes #5019

What's this PR do?

Can't select some countries in pulldowns on phone in portrait mode

How should this be manually tested?

Just see the country field on the profile page by adding degree and employment

Screenshots (if appropriate)

MOBILE

TABLET

DESKTOP

[codecov-commenter]

Codecov Report

Merging #5034 (4ef87c3) into master (cf3ffed) will decrease coverage by 0.00%.
The diff coverage is n/a.

❗ Current head 4ef87c3 differs from pull request most recent head d7fc92e. Consider uploading reports for the commit d7fc92e to get more accurate results

@@            Coverage Diff             @@
##           master    #5034      +/-   ##
==========================================
- Coverage   94.05%   94.04%   -0.01%     
==========================================
  Files         500      500              
  Lines       22972    22972              
  Branches      932      932              
==========================================
- Hits        21607    21605       -2     
- Misses       1267     1268       +1     
- Partials       98       99       +1     

Impacted Files	Coverage Δ
static/js/components/EducationForm.js	96.64% <ø> (ø)
static/js/components/EmploymentForm.js	96.61% <ø> (ø)
courses/utils.py	95.12% <0.00%> (-4.88%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cf3ffed...d7fc92e. Read the comment docs.

[briangrossman]

@umarmughal824 - Visually, the screenshots you shared look great! I think the longest country is:
Ascension and Tristan Da Cunha, Saint Helena, it would be good to check that one, in particular.

[umarmughal824]

@briangrossman this is how it looks like

[briangrossman]

@briangrossman this is how it looks like

Great. Thanks!!! 👍

[umarmughal824]

@annagav could you please review it?

[annagav]

Could we achieve the same result on mobile view without also modifying the full desktop view of the card?

[umarmughal824]

@briangrossman do you think should we should update the desktop screens or should we keep them intact as per the attached screenshots.

[briangrossman]

@umarmughal824

If possible, I think it would be better to have this PR only only affect the mobile view. Ideally, the desktop would continue to look like it currently does on the production site, rather than modifying it:

[annagav]

@briangrossman this is how it used to be before:

and here is in this PR:

[umarmughal824]

@briangrossman @annagav I have updated the screenshots see in the PR description. I have updated the tablet version too as it seems problematic.

[briangrossman]

@briangrossman @annagav I have updated the screenshots see in the PR description. I have updated the tablet version too as it seems problematic.

@umarmughal824 Thanks! I see what you're saying with the wrapping of the city field for the tablet version. Thanks for sharing that.

I think it's fine the way you have it now. The most important thing is that you've fixed the options in the pulldown so they don't overlap.

[annagav]

LGTM 👍