Long category names overlap with replies on suggested topics list

[tobiaseigen]

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.

[simon]

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

[tobiaseigen]

This is #tagging tags and I 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 ....

[tgxworld (Alan Tan)]

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