search

Shopify / hydrogen-demo-store

This template contains a full-featured setup of components, queries and tooling to get started with Hydrogen. It is deployed to https://hydrogen.shop
101 stars 35 forks source link

UI/UX issue with the country selector on mobile #34

Open therealchrisrock opened 7 months ago

therealchrisrock commented 7 months ago

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.01.01

What version of Remix are you using?

2.5.1

Steps to Reproduce

  1. go to the online demo store example
  2. Reduce screen size to mobile view width.
  3. Click the country selector in the footer
  4. Observe styling issue

Expected Behavior

Fly-out menu for countries should be fully visible.

The following updates may fix this:

  1. Fly-out menu should have a non-transparant backgrond.
  2. Fly-out menu opens above the trigger rather than below it.

Actual Behavior

  1. Fly-out menu is cut off, extending past bottom of the page.
  2. Fly-out menu has transparant background so menu items are obscured by the element behind it.

image

therealchrisrock commented 7 months ago

By the way, I'd love an opportunity to make a contribution. If you are open to new contributors and have specific recommendations for the UI changes, please let me know.