[PNI QA] Subcategories — drag to scroll on desktop

[sabrinang]

For people who aren't using a track pad or wheeled mouse, it would be good to be able to drag-to-scroll to see the additional subcategories

[Pomax]

Doesn't the desktop give you a scrollbar (always, on windows, and when you mouse-over, on mac)?

[benhohner]

@kristinashu What do you think of having the categories wrap to a new line on desktop? I feel like the scroll interaction pattern is not very common on desktop vs mobile.

[benhohner]

P1

[kristinashu]

Let's pause on this one. I think the screen cap is from when there was a bug on staging, that @fessehaye has since fixed. Let's see if this is still an issue once Simon's mobile updates have been pushed live and once all the real content is live with real sub-categories.

[kristinashu]

@sabrinang can you please try this again now that the mobile updates are live?

[sabrinang]

@kristinashu I tested what is live and the tags scroll and work on mobile screens as the users can swipe over and it is fine on wide desktop where all tags are in view. The scrollbar is hidden as it clutters up the category tag UI area. However the issue remains for people who view this on a narrow viewport who are without a trackpad or a wheeled mouse holding shift, that they would not be able to access the additional categories.

• I think what Ben suggested of having the tags wrap would work to not encounter this issue. If we unhide the scrollbar that would also help with this issue like what Pomax said but it will add additional UI element not in the mockup. So it'd be good to check-in with @nancyt1 to see what was originally intended for narrower desktop interactions as it may have been considered already during mockup phase
• I also noticed the category tags lose the left margin as the tags start past the edge of the left side of the screen

Not sure if it is intuitive but for me I try to click and drag to see more when I use my mouse so that was my initial recommendation (if I use my laptop trackpad then I can see the rest of the tags):
https://user-images.githubusercontent.com/2492510/141545558-c048dafd-22c0-46d4-abb3-43ccd524fff8.mov

[kristinashu]

Ah ok, I see what you mean now about now!

@fessehaye @nancyt1 @sabrinang do you want to set up a time to chat through this to figure out the best solution?

[fessehaye]

P2 now