Header on the countries page is not reponsive in mobile-view

[NidhiKJha]

Expected Behavior

In desktop view the Countries-header is responsive ie- It displays the continents and search .

Actual Behavior

In mobile-view it is not the same. All continent names are not visible and so is the search

Steps to Reproduce the Problem

1. Click on Countries

Specifications

• Platform: mobile

[NidhiKJha]

Possible solutions:

1. Decrease the font size in mobile-view
2. Make it scrollable
3. Create a dropdown

@hellais @sarathms Which method would you recommend would be the best in this case?

[hellais]

Thanks for bringing this up!

I will see if I can put some time to make a mockup and suggest some improvements to this in the next 2 week sprint.

[hellais]

Took longer than expected, but I came up with a mock for how we could make this responsive.

I also made some small tweaks to the non-responsive version of the navbar:

[hellais]

I assigned this to @sarathms who did the review of the PR from @NidhiKJha