Also we had this existing issue where the "related info" did not have a line break before it in the diagnostic panel.

Before:

After:

The HTML in the quick panel preview seems to be more limited so applying styles from popup.css wouldn't help there. So added extra <br> instead. Hover popup still shows things correctly with extra BR:

The screenshot don't look right to me, why is there a linebreak before the link (and also before the closing ) in the second screenshot)? Have you maybe applied a margin/padding to the .color-muted class in your custom rules, which could cause this?

I think instead of having the <span class="color-muted"> tags around each separate token, it would be better to use only a single wrapper tag of this around the whole Code(CodeDescription) expression. This would prevent such oddities as seen above.

I think the intentions of @predragnikolic were not to achieve something nice looking but just test that overrides work.
We can't prevent people from messing up stuff if they want to.

We could try to have one color-muted wrapper but there is an optional link inside that element so not sure how will it work.

It seems to look the same when the link is also within the .color-muted class.

Before

After

The screenshot don't look right to me, why is there a linebreak before the link (and also before the closing ) in the second screenshot)?

There was some custom CSS that caused such behavior :)

I still didn't try to make it pretty, but I just tested that it is possible to target the class name.

I think the intentions of @predragnikolic were not to achieve something nice looking but just test that overrides work.

Yes

We can't prevent people from messing up stuff if they want to.

And yes

Looks good to me,
@jwortmann, wdyt?

Looks good to me too, but only one small nitpick, that I would not include the leading space in the span.color-muted tag.
So I think

-       meta_info = " "
+       html = " "

should do it.