Giters

hackforla / food-oasis

Repository for the current redevelopment of the Food Oasis Los Angeles website

Home Page:https://foodoasis.la

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Serious Bug: On mobile, it's possible to hide the text panel completely and there's no way to show it again

fancyham opened this issue · comments

commented

Describe the bug

Severity: 5/5 (where 5 is most severe)

It's possible to hide the text panel by dragging the handle off the bottom of the screen, making it impossible for user to see listings or get information

Screen.Recording.2024-04-03.at.3.00.39.PM.mov

  • The text panel's handle should always be visible (ideally, showing a little bit of text, too, so they know that it's a text panel). Either by keeping the handle on-screen, or redisplay it if it's off-screen.

  • Also, tapping a pin on the map should auto-reveal the text panel if it's currently hidden — perhaps halfway up the screen to see both map and text.

Be sure to test on small mobile device screens.

Here's an example of an older phone with a smaller screen:
image

Steps to reproduce the issue

  1. On a smartphone screen or small screen, display the mobile version of our site
  2. Drag the text panel handle off the bottom of the screen
  3. Now there's no way to re-display the text panel.
  4. Tap on a pin on the map
  5. The pin's details are off-screen and can't be seen. Site is broken.

What's the expected result?

  • Text panel should always be accessible — handle must be on-screen at all times, and reappear if needed. See Apple Maps, Google Maps for examples.

What's the actual result?

  • Text panel is inaccessible

This might be a hint:

It also looks like in our /widget version, the map + text pane is a long scrollable panel that the user scrolls…. note the scroll bar on the far right edge. That shouldn't scroll like that!

Screen.Recording.2024-04-03.at.3.17.08.PM.mp4

Contact me if you need access to more examples like above.

Additional details / screenshot

Screen.Recording.2024-04-03.at.3.00.39.PM.mov

Another example, if you have access to Microsoft Clarity:
https://clarity.microsoft.com/player/icb9dr54qj/zxitlb/19rpxrc/?ss=1710529816000&sd=68

Device configuration

  • Device: Mac
  • OS version: Sonoma
  • Browser: Safari

But I also saw it with Android