Category labels are just a bit too high

Contribute UX

AI 生成的摘要

The discussion focuses on the alignment of category labels in Discourse, with users agreeing that the labels appear too high. watchmanmonitor suggests that the title of the category needs to be lowered a few pixels when there are no suggestions left. zogstrip notes that fixing this issue is challenging due to the complexities of vertical centering in CSS. simon proposes a simple solution by making the font sizes of the labels consistent. After experimenting with different approaches, simon discovers a solution by adjusting the display properties and line height of the badge wrappers using custom CSS. The proposed CSS code is provided to address the alignment issue.

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 个赞
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 个赞
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 个赞