Second row on subcategories

[tom-rade]

When you have a lot of subcategories, there should be a new line, instead of a scrollbar. This is currently used in persona and is way more practical. Would also appreciate CSS-snippet to change this if this won't be changed in master.

[youhosi]

@tom-rade Could you give a screenshot?

[tom-rade]

https://imgur.com/Eds7duu There you go

[youhosi]

Hello @tom-rade! I will not change this to branch master, but you have here the code that corrects it, let me know if exactly what you wanted! :)

[component="categories/category"] {
    .category-children {
        display: block !important;
        flex-wrap: unset !important;
        padding-bottom: 5px !important;

        .category-children-item {
            width: ~"calc(33% - 10px)";
            padding-bottom: 10px;
            display: block;
            flex: unset;
        }
    }
}

[tom-rade]

@youhosi Doesn't look very nice but still thanks. Could you nullify your changes for .category-children and .category-children-item (I think) and just use the persona way of doing things? Persona just does lists them in display: block; without doing seperated 33% width like this code.

[youhosi]

@tom-rade, sure:

[component="categories/category"] {
    .category-children {
        display: block !important;
        flex-wrap: unset !important;
        padding-bottom: 5px !important;

        .category-children-item {
            padding-bottom: 10px;
            display: block;
            flex: unset;
        }
    }
}

[tom-rade]

@youhosi I eventually settled for this custom CSS (easier to implement and is consistent across theme updates:

.category-children {
    display: block !important;
    flex-wrap: unset !important;
    padding-bottom: 5px !important;
}
.category-children-item {
    padding-bottom: 5px;
    display: block;
    flex: unset;
}

Thank you