co-design
co-design copied to clipboard
codidact
Fix mobile display for multiple categories
When you have multiple (more than 3) categories, the category header works fine on desktop:
When you use it on mobile, it completely screws the layout:
That should probably wrap onto the next line. We can look at collapsing multiple categories into a "see more" link in QPixel too, but Co-Design should still avoid breaking on this case.
If the length of the category list exceeds the available space, I think we want to show the first however many fit and then have a "more" affordance. Whether that's something with a dropdown or a link to the categories list or something else, I don't know (want input from better UX folks than I).
Alternative that I've just stumbled on by complete accident: simply hide the overflow and make the bar scroll horizontally. Looks terrible on a desktop, but won't happen on a desktop (unless a site has a ridiculous number of categories); looks just fine on a phone:
For added bonus, the half-hidden name is exactly the affordance it needs to indicate that it's scrollable.
Horizontal scrolling seems fine for mobile, though I think conventionally there would be '<' and '>' indicators instead of relying on the luck of truncation?
Ultimately, though, we're going to have to deal with possible category overflow on non-touch interfaces too, and when we do we might end up using the same solution on both. I really want @mattjbrent to weigh in on that.