Category labels are just a bit too high

UX
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

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!

2 Likes
3

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

4

PR please :question:

2 Likes
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 .badge-wrapper.box span,
#suggested-topics h3 .badge-wrapper.bar 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;
}
2 Likes