Overflow css bug for boxes subcategory list style

Hi! I noticed a small bug with subcategories displayed as boxes. When you scale your browser window, the text overflows outside of the box area.

I temporarily added this to account for it: .category-boxes .description {overflow: hidden;}.

Not sure if this is a bug specific to my theme, or just discourse in general, but I’ve seen the same across other sites like Projects - Codecademy Forums.

3 Likes

It’s a general Discourse issue.

We’re using JS to limit the overflow and keep the boxes at a consistent height, so the layout breaks on resize but fixes when you refresh.

This was originally implemented 3 years ago, and we’ve dropped IE11 support recently, so it’s probably a good time to update this layout to avoid the issue.

6 Likes

Thanks @awesomerobot, that makes sense!

I merged an update yesterday that updates how the overflow works. We now use CSS line-clamp, which will adjust on page resize without a refresh.

https://github.com/discourse/discourse/commit/706f1a629475a8eee682685fb0119c180207cd6b

You’ll get this change the next time your site is updated.

4 Likes

Hi! I was wondering if there is a way to implement the Boxes with Subcategories setting only to one specific theme/ theme component? If not, is there a way to preview this setting without publishing?