Category labels are just a bit too high

Contribute UX
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 „Gefällt mir“