Text panel obscures map and pin on mobile

[Shienny1]

severity 4/5
Very hard to see location on map on mobile devices

Problem:

On mobile, tapping a result to get details loads org detail view, but layout of split screen obscures map and pin, and pin is off-screen.

User goal:

to get see the cross streets of the location indicated on the map so i tap on the icon

my expectation:

To zoom in to that specific location and see more information of the name and hours of operation (maybe covering maximum bottom half, and leave the upper half of the screen on the map showing the selected location zoomed in.

actual result:

80% screen covered by TEXT on location's information etc. Covering the map.
So I swipe down to open the window to map again.
BUT the map window has migrated to a different location, no where close to the selected location.

screenshots and video

Devlasite_Textpanel.on.Map.mov

possible solutions

make map larger - see figma designs - I believe it’s supposed to be 50% text at first? — Bryan

Ensure that with new split-screen view that pin is centered in map viewport at first load. This might mean calculating visible map and centering it as text panel is resized.

for example if text is 80% of screen, map is remaining 20% and pin should be at approx 10%.

Ideally the selected pin and the user’s location are both visible on the map at the same time. This will give them a sense of location relative to where they are now.

Stretch goal: if pin is centered, then keep it centered as user resizes text panel.

[fancyham]

Changed title, added some text, added formatting (using markdown https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) and inserted the screenshot and video into the issue itself (better for easy reference - drag and drop or attach those media files). Also tagged it for devs to look at.