NOTE: Originally posted in https://matrix.to/#/!HKutvjxPnajVyCNLhF:matrix.org/$Tq-nW8L-nZUTufZerUeNEE8cn4bHtH0uEyuQyOQZrhU?via=gitter.im&via=matrix.org&via=mozilla.org (which was started for related issue JENKINS-73167 with Badge 1.10 and not fixed by 1.11). As part of the workaround from that issue, the following block of userContent/custom.css file is applied on this site: 

/* Align to markup of badges before plugin 1.10 */
.badge-shortText {
  border: 1px solid #C0C000 !important;
  background: #FFFF00 !important;
  opacity: 1 !important;
  color: #000000 !important;
  white-space: normal !important;
  text-align: right !important;
}
.badge-shortText--default-background::before {
  opacity: 0 !important;
} 

Updated to Badge 1.11 and it is broken again in a different manner, at least with my override CSS in place:

Checked: not much better with that override disabled - just that new message mini-boxes do become gray:

It seems to apply the .icon-sm style to the boxes, with its height=width=16. Clicking them off in F12, with height limit disabled the icons (where available) become huge; with width limit disabled the text boxes become large again. The style in question:

 

With original badge-plugin CSS (and disabled both width and height for the icon style):

With my override CSS from the other day (and disabled width/height) the icon is not as huge - probably scales proportionally to available width, which is now smaller due to the text box wrapping:

 
With only height limit enabled, it looks almost normal. But not quite (box is smaller so overlaps with text, and not all lines have it at all if the large message is wrapped:

 
And for some reason in some messages the text runs away to the right (box not under the timestamp so shifted by its presence, I guess).
 
 
Probably the new plugin release overly zealously applies that style to all elements (div's with text here):

 
Here's example markup from the new-style entry with two icons - wrench on the start and lamp in the end, although that lamp is from the Build Failure Analyzer plugin and has different (lack of) style - where icon-sm style height:16px is enabled and width limit disabled:

Details for the icon (wrench) part:

 
As seen in an earlier screenshot, with both of the limits disabled, the wrench is huge but the lamp is okay. I found that the copied markup above was wrapped for the icon. It has a span which carries the icon-sm style and I think it should be just removed from the div entries. Generating code does know where it inserts icons, right? Or do we expect some added by addShortText() kind of methods to be in-lined as part of the yellow text?
 
Otherwise... CSS is not my forte, but I guess there are keywords to limit the size of only images and not the div itself?