Long category names overlap with replies on suggested topics list

See screenshot. When the category name is long, the text overlaps with the text in the “replies” colum on suggested topics list. I guess the answer is to shorten it to say 15 characters followed by ...

I know, I know, this title is way too long. But we need to be able to distinguish very clearly what is internal from what is public on our discourse.

4 Likes

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 :slight_smile:

1 Like

This is #tagging::tag tags and I :heart_eyes: it! Nice job on this one - we will use it alot! (Might prefer the tag glyph to be a bright color, not black)

FYI - long category names run long in the autocomplete which doesn’t look great - might be nice to limit the length shown and end with ....

4 Likes

Bunch of fixes for this long category name bug.

https://github.com/discourse/discourse/commit/2eece872

https://github.com/discourse/discourse/commit/abc4454e8913983b9f0774b8f0a2d18899a6089e

https://github.com/discourse/discourse/commit/ee38572be37b59466710da5f87e5f6a9e571d987

2 Likes

This topic was automatically closed after 2 days. New replies are no longer allowed.