Category labels are just a bit too high

(Allen - Watchman Monitoring) #1

When there’s nothing left for discourse to suggest in a category, it looks like the title of the Category needs to come down a few pixels.

(red line added by me for clarity)

Here in my hosted forum

and here on meta

(Régis Hanol) #2

It kinda is a PITA to fix. We’ve already spent countless man hours on this, but man, vertical centering in CSS is hard!

(Simon Cossar) #3

There are two different font sizes on the same line. The easiest solution would be to make them the same size.

(Sam Saffron) #4

PR please :question:

(Simon Cossar) #5

After a lot of messing around with this, the solution turns out to be very simple. The alignment problems are coming from trying to display block and inline-block elements inside of the h3 text. This works as custom css:

// Target the .badge-category text, the bullet icon needs to maintain `display: block`
#suggested-topics h3 .badge-wrapper.bullet span.badge-category, 
#suggested-topics h3 span,
#suggested-topics h3 span {
  display: inline;
#suggested-topics h3 .badge-wrapper.bullet span.badge-category, {
  // Override vertical-align: text-top from `badges.css.scss`
  vertical-align: baseline;

#suggested-topics h3 .badge-wrapper.bullet {
  // Top of bullet lines up with top of line - adjust line height to vertically align bullet.
  line-height: 0.8;

Edit - to take care of the case where a badge-wrapper.bullet has a parent category, the last rule needs to be changed to this:

#suggested-topics h3 .badge-wrapper.bullet,
#suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
#suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg {
  line-height: 0.8;