After latest update, broken sub categories layout

AI-generated summary

After the latest update, patrickemin noticed a broken subcategories layout on one of their Discourse self-hosted sites, where subcategories are displayed on the right side instead of under the main category. carson suggested a custom CSS solution to fix the issue, which is caused by the default float behavior on the category logo. Although the solution may work temporarily, patrickemin finds it strange that the issue doesn’t occur on their two other sites, which were updated in the same way. carson explained that the issue is due to the tricky behavior of float, which depends on the relative heights of the category description and logo.

Hi, I have three discourse self hosted sites, on one of them, list of categories don’t display well, instead of being under the main category, they are on the right side:

Any idea? Thanks.

Hi @patrickemin,

This is happening because of the default float behavior set on the category logo.

I would add this to your custom CSS:

.categories-list .category .category-logo.aspect-image {
  float: unset;
  margin: 0.5rem 0;
}

Thank you for your reply. I’ll try it out, it may be a temporary solution for one of my three sites, but it’s strange that it doesn’t happen on the other two sites, which have been updated in the same way.

float is tricky, the subcategories list going underneath depends on whether the height of the category description is vertically greater than the height and margins of the category logo.

I see, thank you.