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

https://github.com/hackforla/food-oasis/assets/3376957/87062398-06a2-4bcd-99bf-9ecd2cce789f

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.

related issues

• #2028