How to correctly position data that has additional formatting for context
I'm currently working on standardising how read only form data is displayed. Right now, it can be stacked labels and values OR label left, value right. My preference is to go for the stacked view and it works pretty well everywhere except for fields that have a colour associated with the value. The value is presented in a pill format with a corresponding colour applied to the background.
This was done so that it is easier to see at a glance and was a big hit with our users so not something I can take away at the moment. Having gone around a few options I have two layouts here that I can work with but I'm not really satisfied with either of them.
The option on the left makes the content look like it's been indented and repositioning so the text aligns makes it look very untidy. The option on the right is OK but at odds with every other field in the same view.
I'm looking for guidance on how best to lay this content out so it works for all OR how best to make an exception for this field type without it looking as out of place as it does.