I’ve been working on something like this. There is a lot of empty space to the left of your category names. One solution is to give the topic-list columns fixed widths as a percentage of the total width. You could try something like this in the custom css area:
#suggested-topics .topic-list {
-moz-box-sizing: border-box;
box-sizing: border-box;
*, *:after, *:before {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
}
#suggested-topics .topic-list .main-link,
#suggested-topics th.default { // th.default is the topic header - should maybe have .main-link added as a class.
width: 40%;
}
#suggested-topics .topic-list .category {
width: 30%;
}
#suggested-topics .topic-list .posts {
width: 10%;
}
#suggested-topics .topic-list .views {
width: 10%;
}
#suggested-topics .topic-list .activity {
width: 10%;
}
Adjust the percentage values (make sure they total 100%) to find something that works. As they are set up at the moment, the category names will not wrap - if they exceed the width of their container they will extend past it. That could be changed.
Edit - I see that the problem is with the suggested-topics list. I’ve updated the css. It is targeting both the list-container topic-list and the suggested-topics topic list. You probably want to treat them separately though.
Edit - I’ve updated the css to just target the suggested topics list - and to make it actually work 