[BUG]: Android keyboard shoves join screen page up and makes it not easily usable

[CatQueenCodes]

Linked User Story: (if applicable) n/a

Device Used: Android Huwai (it happens on all androids but is not always

Browser(s) Used:

• [x] Chrome
• [ ] Safari
• [ ] FireFox
• [ ] Other: __

Environment:

• [x] Production
• [ ] Staging
• [ ] Localhost

Description

On all Android devices when the keyboard is up you can not scroll on the join screen. Depending on screen size/keyboard pop up height it shifts the content of the page and stuff overlaps and is not user-friendly. On iOS devices you can scroll around on the join screen with keyboard up and stuff is not shifted.

Expected Behavior

Be able to scroll on join screen with the keyboard open after clicking Name/Code field so the elements don't overlap

Actual Behavior

Overlapping/squishing/no scrolling to view when keyboard is opened

Screen Shot/Screen Video Capture

https://user-images.githubusercontent.com/59713017/118370039-d7b8a180-b573-11eb-8a3f-5604f0c4d418.mp4

Replication Steps & Data

1. on an android phone go to cardsofcarousal.com
2. click "join"
3. click one of the input fields for name or join code
4. try to scroll
5. observe you can not scroll when keyboard is open and the content of the screen is permently shifted

User Story

As a plater, I want to be able to scroll on the join screen when my keyboard is open, so that that I can view all the fields and text as needed.

Acceptance Criteria

Criteria needed for this to work as intended in the user story.

• [ ] When the keyboard is open on android devices the site should be able to scroll behind the keyboard over lay and the content should not be squished/altered.

Consider looking into overflow css properties.