[$80] [iOS][Android] when previous page popup so it's hide behind the page per count button

[LieutenantRoger]

Steps to Reproduce

1. Go to the https://platform.topcoder.com/earn/find/challenges
2. Scroll down and click on the next till get the previous page
3. Observer when previous page popup so it's hide behind the page per count button

Actual Result(s) when previous page popup so it's hide behind the page per count button

Expected Result(s) each button should be aligned properly

Screen shot

Environment Details

**Device(s):** Iphone 7
**Operating System:** iOS 14.7.1
**Browser(s):** safari 14

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/871e1015-39f3-47cb-a692-1dac541d2e50 has been created for this ticket.

This is an automated message for lieutenantroger via Topcoder X

[LieutenantRoger]

@nqviet Please let's use this ticket as the responsive fix. :)

I have reviewed your PR: https://github.com/topcoder-platform/micro-frontends-challenges-app/pull/280/files

Couple of issues:

Under mobile view:

1. Can we have some padding here in iOS screen: https://monosnap.com/file/CwogKK55RFyGV58JRhPmSZAaLcW1gA 2

https://user-images.githubusercontent.com/2875203/144274147-6a75d512-cbef-4c8c-876d-34e36e609cb3.mp4

When we switch to another page, the mobile view seems will be stretched firstly, then rezied to mobile. Please refer to the above recording.

Under iPad view:

1. The view seems will be stretched as well if we visit the second page, when we reach the four page, the UI element seems not aligned, please see the operations i have made in this video.

https://user-images.githubusercontent.com/2875203/144274867-deb02183-f82f-4684-bb0a-e7b009e8b78d.mp4

2. Also please refer to above video recording, the pagination indicator seems overlapped still under iPad view.

3. Similarly for the banner, please add some padding for top and bottom : https://monosnap.com/file/J2uqFtalgne1dXyeNr4ngQ5MQhMlQQ

[LieutenantRoger]

@nqviet please assign yourself for this ticket, I seems not able to assign you as I can't find your github id in the assigee search box.

[nqviet]

@bug-bash-helper assign

[bug-bash-hunt-helper[bot]]

@nqviet 🛑 you have some issues assigned which are not completed yet, see https://github.com/topcoder-platform/micro-frontends-challenges-app/issues/258.

As per our Bug Bash rules you may work only at one issue at a time. Please, complete other issues first or unassign yourself before picking up a new issue.

[LieutenantRoger]

@nqviet I added Review For Review label for another ticket, please try one more time to see if this work, if the bot still doesn't allow you to assign, please unassign another ticket, we have logs, I will assign you back when we close that ticket.

[nqviet]

@bug-bash-helper assign

[bug-bash-hunt-helper[bot]]

@nqviet ✅ you are now assigned to this issue and have 12 hours to complete it.

As soon as you are done, please, make a comment like below, including the link to the pull request:

@bug-bash-helper <link to PR> is ready for review

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/871e1015-39f3-47cb-a692-1dac541d2e50 has been assigned to nqv2018.

This is an automated message for lieutenantroger via Topcoder X

[nqviet]

@bug-bash-helper https://github.com/topcoder-platform/micro-frontends-challenges-app/pull/280 is ready for review

and https://github.com/topcoder-platform/micro-frontends-earn-app/pull/213

[bug-bash-hunt-helper[bot]]

@nqviet ✅ this issue is marked as Ready for Review.

Now you may pick up another issue which is open for pickup if you like to.

[codejamtc]

Fixed :ok:

[codejamtc]

Fixed in Prod 🆗

[LieutenantRoger]

Payment task has been updated: https://www.topcoder.com/challenges/871e1015-39f3-47cb-a692-1dac541d2e50 Payments Complete Winner: nqv2018 Copilot: lieutenantroger Challenge 871e1015-39f3-47cb-a692-1dac541d2e50 has been paid and closed.

This is an automated message for lieutenantroger via Topcoder X