NOTE: Initially reported and explored in Gitter: https://matrix.to/#/!HKutvjxPnajVyCNLhF:matrix.org/$Tq-nW8L-nZUTufZerUeNEE8cn4bHtH0uEyuQyOQZrhU?via=gitter.im&via=matrix.org&via=mozilla.org

After the recent update of the Badge plugin, the "yellow boxes" in the classic interface left-column list of jobs have changed to be gray (old ones are still yellow) and are no longer wrapped for long entries so they do not fit into the column (also impacts message boxes rendered for old builds). Their text also can not be selected and copied into a clipboard (old boxes on the same page can).

Are these particular changes critical for the new version's changed workings, or can their UX be un-broken back? Is this something as simple as a (perhaps local) patch to CSS? (UPDATE: Further experiments confirmed that at least the worst "offenses" can be amended by CSS, although I could not make it persistent yet).

• Old-builds' boxes, some fitting and some skewed :
  
• Text could be selected there:
  

• New boxes: gray, unselectable, and not wrapping:
  

• For shorter messages, things do fit well (separate boxes are wrapped around separately):
  

• They were supposed to look like this (seems, a Firefox run-time F12 tweak to badges/assets.css for white-space: normal and text-align: right restores this bit of behavior):
  

• The yellow and gray badges seem to have different CSS styles (makes sense):
  
  
• ...Or in markup detail, NEW GRAY:
  
  ...vs. OLD YELLOW (note the in-line style):
  

I'm still at a loss what CSS property combo loses the ability to select and copy the text (is it the use of ::before then message then ::after so it is not quite a tagged text?), or for that matter even what makes the box gray (the original yellow was apparently via inline style background of each div separately,with a grayish border remaining; maybe the new lack of filling is that gray background which was always there being not only the border now)?

Experimentally, I've tried editing that instance's $JENKINS_HOME/userContent/jenkins.css (as configured to be used), adding this CSS section: 

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

However the CSS in the plugin seems to take priority over this one. In F12 I can un-tick the text-align and white-space items coming from plugin's assets.css and then the boxes change form to expected size (at least, the old ones do; new ones seem to ignore it anyway - but currently a build is running and the pane keeps refreshing, so it is not easy to check in real time).
 
 
With this edit, the message boxes became dark-yellow; F12 clicking away of .badge-shortText--default-background::before setting for background: currentColor seems to make them all-yellow (losing the darker border):

It seems there is some virtual canvas whose width now dictates all boxes' sizes. Even though the new box became "wrapped" (as seen in build #19 above), it aims for something larger than the builds panel and pulls the old boxes along into the abyss.

UPDATE: Following a suggestion to add !important modifiers to the custom CSS, I got the overrides working: 

.badge-shortText {
  border: 1px solid #C0C000 !important;
  background: #FFFF00 !important;
  color: #000000 !important;
  white-space: normal !important;
  text-align: right !important;
}

Now it looks much more usable (yellow being still different though, and text still not selectable, but counts as a quick workaround for my taste and pressing needs):

FURTHER UPDATE:

The dark-yellow is ultimately because of a combination of .badge-shortText--default-background::before items opacity and background: currentColor (originating from e.g. .badge-shortText color but not purely it... setting that one to blue I get a purple/magenta haze here).
So in the latest screenshot above effectively it lays a greyish mask over the requested yellow background.

Setting opacity: 0 to effectively ignore the ::before "pseudo-element" (as the browser calls it), I get the normal yellow (see just below): 

/* 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;
} 

Here, old and new boxes look the same (new is still not clickable to select - note different mouse cursors):

 
 
For kicks, with .badge-shortText color: #0000FF (blue) and ...::before opacity: 1 I get purplish text in older boxes and purplish background (in newer ones melding with the same-color text):
 
 

 
With opacity 0.8 the text is barely visible, but the colors do differ (so it is not overlaying the whole content, per se):