Fix mobile display for multiple categories

[ArtOfCode-]

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.

[cellio]

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).

[ArtOfCode-]

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.

[cellio]

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.