7624 - Subcategories front-end styling for mobile

[fessehaye]

Includes front end stylings for mobile
Closes #7624
Related PRs/issues #7746

You do need to create subcategories on the test site via the admin account in order to test

[sabrinang]

Mobile

• If the creep-o-meter face is relocating and we do not have a heading, can we reduce the gap above the checkbox so it is more balanced on mobile
• Subcategories scroll on mobile so it works but when I click on one, the search becomes active and my keyboard is triggered each time and the creep face gets pushed up too which makes it hard to browse products. See video:
  https://user-images.githubusercontent.com/2492510/140180489-41ac3e12-0e09-42c4-b239-3f980f9ba827.mp4

Desktop (narrow viewports)

• the subcategories get cut off on some narrower viewports
• not able to scroll sideways on desktop narrow viewports
  

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

Done

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[sabrinang]

Spacing

• The mobile spacing looks good now but we lost the spacing above creep-o-meter that was added for desktop previously in 7623 - Subcategories - front-end styling for desktop #7712 (review)

Hide Scrollbar?
The scrolling works now but a big scroll appears now on...
narrow viewports:

and mobile:
https://user-images.githubusercontent.com/2492510/140402658-16ef9d7f-92e8-4c36-992d-8375ec652abe.mp4

• Is it possible to hide it while keeping the side scroll functionality?
• on narrow viewports, is it possible for the subcategories to extend to the edge of the page instead of being cut off at the container?

Thanks for fixing the keyboard trigger issue on mobile, it works way better!

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

done

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[sabrinang]

Thanks for fixing the cut off issue and hiding the scrollbar! 👍

I'll file a separate QA to be able to drag to scroll the subcategories to improve usability

[sabrinang]

I filed the QA drag to scroll issue here: #7787

[danielfmiranda]

Hey Simon! Thanks for tagging me on this:

I took a look at the code and everything looks good to me, I did find one minor thing however I am not sure if it is by design:

At the medium breakpoint the subcategories seem to get unaligned with the large category at the top:

If this is to be expected, please let me know and I will approve the changes, thanks!

[danielfmiranda]

Hey Simon! Thanks for answering my questions, approved!