Category names don't wrap like tags , causing overflow on mobile

[huynhthai824 (Sora &\)]

Hi everyone, I’ve noticed that tag names in the filter dropdown can wrap to the next line if they’re too long, which is great for mobile responsiveness. However, category names don’t seem to have the same behavior. When a category name is too long, it overflows the filter container, breaking the layout on mobile devices.
Here are two screenshots to illustrate the issue:

[Canapin (Coin-coin le Canapin)]

@huynhthai824

When a category name is too long, it overflows the filter container, breaking the layout on mobile devices.

Long category names also overflow on the topic list. Because it’s very minor and slightly related, I’ll leave this here instead of creating a new topic (feel free to move it if necessary):

Category names should ideally be short and it was the first time I saw this behavior.

[awesomerobot (Kris)]

I’ve added some adjustments to avoid this

UX: prevent long category names from overflowing on mobile topic list

let us know if you encounter any more problems with long category names!

[unknown_error]

@awesomerobot,

This also seems to be an issue with category names in the “Suggested” posts at the bottom of a thread.

There seems to be two separate but related problems:

1. If the viewport size is decreased after the initial pageload, the table doesn’t shrink down correctly:

This causes table.topic-list to overflow the width of #main-outlet-wrapper

---

2. Separately, h3.more-topics__browse-more a.badge-category__wrapper doesn’t ellipsify (regardless of whether the page was mobile-sized at pageload or shrunken down), which also causes the page to be too wide. It can be forced to with a max-width: 80vw or thereabouts, but that might have unintended consequences on wider monitors.