We're seeing issues in DSR with icon misalignment due to variation in the way line-height: normal is calculated when compared to the same element in DS.

Example: Multiselect's selected option buttons

Both DS and DSR have line-height: normal

• in DS this equates to 19px
• in DSR this equates to 22px

In the second row of screenshots below you may be able to see that in DSR there is additional space around the #text content due to the extra height, along with the x icon being shifted higher

Screenshots

DS	DSR

Fix in DSR

I'd be weary of making a large scale change to the line-heights in DSR, but if we can determine which other elements are affected (probably anywhere that has text + icon) then we can correct them by setting a specific value for those elements' line-height (as opposed to "normal")

.o-multiselect_choices button {
  // (target height) / (font-size) => (19/16) => 1.1875 
  line-height: 1.1875; 
}

I would love help understanding why this difference is occurring and if the proposed approach makes sense.

TODO

• Audit components to see where else this is happening