Bounty icon is poorly placed

Question

I just had a bounty awarded for my answer. (Thanks, Ruslan!)

When I went to look at it, though, I noticed that the bounty marker icon looked kind of awkward, like it didn't really want to be there, shuffling off to one side and huddling uncomfortably close to the accepted answer checkmark:

I think we should give our bounty icon a little more grace and confidence, make it be proud of itself! And I think I know just the CSS rule to do it:

.vote .bounty-award {
     margin: 5px auto;
}

^{The .vote is there just to make this rule more specific than the existing bounty margin rule, which, for some strange reason, specifies a 5 pixel right margin and nothing else.}

---

With this new CSS rule added, the bounty icon looks like this:

^{Yes, I got an upvote while testing this.}

That looks a lot better, don't you think?

In fact, the awkward bounty marker placement doesn't seem to be limited just to physics.SE, although it's more obvious here than one many other SE sites. As far as I can tell, the CSS rule I suggested above seems to improve (or have no visible effect on) the bounty marker appearance on all Stack Exchange sites I've so far tested it on, so I'd suggest it as a general CSS change to all the sites.

Still, I'm posting this bug report / suggestion here, rather than on meta.SE, because the problem is most noticeable here on physics.SE. (And because per-site metas just don't get enough love in general.)

Answer 1

Actually, the following set of CSS styles (applied on top of the existing styles on each SE site) seems to work even better:

.vote .bounty-award-container {
     margin: 13px 0;
     text-align: center;
}
.vote .bounty-award, span.bounty-award {
     margin: 0;
     display: inline-block;
     padding: 0.2em 0.5em;
}

These rules allow the width of the bounty marker to adapt to the bounty amount, while keeping it centered and leaving a reasonable margin between it and any other post icons:

The funny selector for the second rule above is to let it apply both to the left bar icons for awarded bounties and to the notice box for active bounties (where the current 5px right margin also looks pretty ugly) while still keeping it more specific than existing site style sheets.

I have included the CSS styles above in the Stack Overflow Unofficial Patch v1.14 user script. After some testing, I decided to enable them on all SE sites. On the original trilogy sites (SO, SU, SF) they have very little effect, as they strongly resemble the existing styles, and the few differences are overridden by !important rules in the site style sheet. On most other SE sites (as far as I've tested) they seem to improve the bounty icon appearance anywhere from slightly to significantly.