[CWM] Critical mobile UX bugs

[lin-d-hop]

Descriptions

In initial mobile testing a number of critical UX issues have come up. These all need fixing.

• [x] Directory, Search and results don't scroll up quite far enough, leaving some content behind the nav
• [x] Pop-up doesn't fit on the screen well, resulting in weird behaviour and a difficulty to view it, particularly on smaller screens
• [x] Add apply filter button and don't open the results panel until this is clicked. The UX on this needs to be clear ie dont make it so you ahve to scroll to see the button.
• [x] Search results not closing when result is clicked (doing this in #64)

Acceptance Criteria

The above issues are fixed and deployed.

[ms0ur1s]

Task 1: Added 80px padding to the bottom on the content panel (height of the nav), This bug only appears on my phone and I can't recreate it on my machine using dev tools or the browser plugin I have, so it needs live testing.

Task 2: Reduced mobile pop-up height from 500px to 450px.

PR for the first three issues

https://github.com/DigitalCommons/mykomap-monolith/pull/73

[rogup]

@ms0ur1s I'll take task 4 and do it as part of my work on #64

[lin-d-hop]

Guys! Impressive! @rogup @ms0ur1s

[lin-d-hop]

Can I confirm this has been deployed? Still seeing these issues on my phone :(

[ms0ur1s]

@ms0ur1s I'll take task 4 and do it as part of my work on #64

Thanks man ❤

[rogup]

Can I confirm this has been deployed? Still seeing these issues on my phone :(

Yes, deployed. I'm seeing the changes live - mabybe some browser caching on your end?

[ms0ur1s]

Andriod and IOS positional difference for reference

Android Chrome

IOS Safari

IOS Chrome

[ms0ur1s]

PR for the apply filters box positioning bug