Extremely long category names cause CSS layout issues

I found some problems while testing the CSS to modify the discourse page 404.

All the screenshots are made in safe-mode, no custom stylesheets added yet, and only the official plugins installed.

I created categories and subcategories with very long name (max 50 characters, default limit set by Discourse) and very short or normal names to test the rendering of CSS in 404 page.

Here the issues:

category style set to none:


If the category names are extremely long, the name is not properly cut either on the homepage or on the hamburger menu
From a quick search in the browser console the item .badge-wrapper.none span.badge-category and his relative css settings, is missing from the Discourse stylesheet.

category style set to bullet:

If the category names are extremely long the bullet loses its square shape (this problem is also inherited in customizing page 404). Note that this is a parent category.
Here I think the problem is the setting display: inline-flex on .badge-wrapper.bullet

I know that not many sites create categories with such long names (50 chars), but given the chance to do so, these layout errors must be corrected.

v1.9.0.beta8 +100

2 Likes